webpack看这一篇就够了，webpack4.0配置详解。
-
什么是webpack，webpack给我们解决了哪些实际问题？
什么是webpack?
webpack 它是基于 Node.js 开发出来的是前端的一个项目构建工具。webpack给我们解决了哪些实际的问题？
你是否和我一样整天被这种包与包之间的依赖关系搞得头皮发麻。比如你需要用到easyUI那么你就得引入jQuery,并且jQuery必须在easyUI引入之前引入。那这个就有点烦了,每个页面都必须引入。
引入过多的静态资源后，网页打开需要的二次请求量也就高了，这样网页打开就会比较慢，那么项目经理找你的次数也会增加，加班次数增加，啊啊啊啊！
这时候webpack就来了，可以很好的解决以上的问题，从此再也不用加班了。
tips:除了
webpack这个打包工具外还有Gulp也比较常见。- webpack完美实现资源的合并、打包、压缩、混淆等诸多功能。
- 从此写代码无烦恼，天天吃饭吃的好。
webpack官网
webpack的安装
-
npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令 - 在项目根目录中运行
npm i webpack -D安装到项目开发依赖中
webpack的配置文件
- 其实
webpack也可以不需要配置文件，然后就靠输命令来构建。(如果你喜欢你可以在项目上试试,公司第二天辞退QAQ) - 使用
webpack的配置文件。
- 首先创建
webpack的配置文件，在项目根目录创建webpack.config.js。 - 配置
webpack,你得先清楚这两个概念:'出口(output)'和'入口(entry)'。- 入口就相当于工厂中的原材料，出口就是做成的产品（够形象了吧）。
- 入口简单讲就是你自己写的代码，出口呢就是
webpack帮你处理过后的代码（你：’我为什么要给他处理，我自己不知道我写的啥吗？‘。先别抬杠，别着急慢慢看）。
webpack.config.js简单的配置文件如下：
// 导入处理路径的模块
var path = require('path');
// 导出一个配置对象，将来webpack在启动的时候，会默认查找`webpack.config.js`，并读取这个文件中配置，来进行打包
module.exports = {
// 入口文件
entry: path.resolve(__dirname, './src/main.js'),
// 出口文件
output: {
// 出口的路径
path: path.resolve(__dirname, 'dist'),
// 出口的文件名
filename: 'bundle.js'
}
}
这样你在项目根目录执行webpack命令就会帮你把main.js给打包成bundle.js然后你以后只需要引入bundle.js就行了,是不是很神奇。
- 把
main.js打包的意义：- 我们可以使用ES6提供的模块化进行代码的编写了。（配置
babel之后） - 我们可以直接在js文件上引入样式了。
- 代码美观冗余的代码很少很少了。
- 我们可以使用ES6提供的模块化进行代码的编写了。（配置
大体了解了吧
- 我们这样配置后有个问题，我们每次修改代码都必须重新打包，一个字：麻烦。
- 使用
webpack-dev-server来实现代码的实时打包。- 首先
npm i webpack-dev-server -D安装一下webpack-dev-server - 直接输
webpack-dev-server会报错，这里我们得借助package.json来进行打包，在scripts下增加"dev": "webpack-dev-server"指令，然后npm run dev,就能实时打包了。 - 使用
webpack-dev-server的打包是不会产生出口文件的，他是将出口文件放在内存里，这样来做到实时读取和实时打包的。 - 默认启动端口是8080我们可以
webpack-dev-server --port 3000来指定端口 - 默认启动是在项目根目录，我们可以
webpack-dev-server --port 3000 --contentBase src让其在./src中启动 - 可以配置热更新，就不用每次刷新了，
webpack-dev-server --port 3000 --contentBase src --hot - 每次都得手动开启浏览器，不喜欢，我们可以让其构建时自动打开浏览器
webpack-dev-server --port 3000 --contentBase src --hot --open - html文件没进内存-_-!,我们可以配置插件
html-webpack-plugin插件
// 导入处理路径的模块 var path = require('path'); //自动生成html文件 var htmlWebpackPlugin = require('html-webpack-plugin'); // 导出一个配置对象，将来webpack在启动的时候，会默认查找`webpack.config.js`，并读取这个文件中配置，来进行打包 module.exports = { // 入口文件 entry: path.resolve(__dirname, './src/main.js'), // 出口文件 output: { // 出口的路径 path: path.resolve(__dirname, 'dist'), // 出口的文件名 filename: 'bundle.js' }, plugins:[ new htmlWebpackPlugin({ //模板路径 template:path.resolve(__dirname, 'src/index.html'), //生成的HTML文件的名称 filename:'index.html' }) ] } - 首先
+ 这里就不需要再配置`--contentBase src`了，`html-webpack-plugin`插件会自动把bundle.js注入到index.html页面中！（好玩吧）
+ 最终在packjson的`script`中增加这个：` "dev":"webpack-dev-server --port 3000 --hot --open" `
+ 除了加命令参数外，我们还可以在配置文件中进行配置增加
1. 第一步在配置项中增加
```javascript
devServer:{
port:3000
hot:true,
open:true
}
2. 在头部加载`webpack`模块：
var webpack = require('webpack');
3. 在`plugins`下新增插件（热部署）：
new webpack.HotModuleReplacementPlugin()
使用webpack来打包css文件
+ 是的，css也能打包，包括`less,sacc`都行的只是`loader`不一样
1. 安装需要的`loader`，运行`npm i style-loader css-loader -D`
2. 修改配置文件增加`module`项配置
// 配置第三方loader模块
module: {
rules: [
{
// 正则匹配所有的.css文件
test: /\.css$/,
//处理css文件的loader
use: ['style-loader', 'css-loader']
}
]
}
注意：
use表示使用哪些loader来处理test所匹配到的文件；use
中相关loader模块的调用顺序是从后向前调用的；（自己第一次的时候就入坑了）
使用webpack打包less文件
- 下载需要的loader
npm i less-loader less -D - 修改配置文件：
module: {
rules: [
{
// 正则匹配所有的.css文件
test: /\.css$/,
//处理css文件的loader
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
使用webpack打包sass文件
- 下载需要的loader
npm i sass-loader node-sass -D - 修改配置文件：
//在module下的rules增加如下代码
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
使用webpack处理css中的路径（图片等一系列）
- 下载需要的loader
npm i url-loader file-loader -D - 修改配置文件：
//在module下的rules增加如下代码
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
- 默认会将图片转换成
base64,可以通过limit设置进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：
//在module下的rules增加如下代码
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
使用babel处理高级JS语法
- 安装需要的loader
npm i babel-core babel-loader babel-plugin-transform-runtime -D - 安装转换规则
npm i babel-preset-env babel-preset-stage-0 -D - 修改配置文件添加相关loader模块，一定要把
node_modules文件夹添加到排除：
//在module下的rules增加如下代码
{
test: /\.js$/,
use: 'babel-loader',
//排除node_modules
exclude: /node_modules/
}
- 在项目根目录中添加babel的配置文件
.babelrc文件，并修改这个配置文件如下：
{
//使用何种转换语法
"presets":["env", "stage-0"],
//插件配置
"plugins":["transform-runtime"]
}
注意：这里使用最新的转换语法
babel-preset-env，你看网上很多都用babel-preset-es2015，建议你使用env,它包含了所有的ES相关的语法；
好了webpack的基本配置都说的差不多，不用去记，很多脚手架就能直接给你配好，比如vue-cil，不过如果怕忘欢迎收藏。