webpack4配置全记录

April 17 2018

持续更新…
最后更新时间2018.4.17

webpack(4)

1 配置分离

项目过大的时候，配置文件最好是分离开来。导出webpack配置的时候，需要使用webpack-merge这个包。
比如

webpack.base.js
webpack.dev.js
webpack.prod.js

其中base放一些基本的配置。dev中可以配置devServer等开发时的参数。prod中配置压缩等配置。

2 entry output

2.1 默认值

在webpack4中，给了这两个key了默认值。分别为

entry: './src/main.js',
output: {
	path: path.resolve(__dirname, 'dist'),
	filename: 'bundle.js'
}

也就是说，如果在一个项目目录中没有任何配置的话，直接运行webpack也是可以的。

TIPS

在webpack4中，命令行与配置文件已经分成两个包了。如果直接使用命令行工具的话，需要使用webpack-cli这个包。

如果想更改output.path的时候，也需要加了entry参数，也就是说，修改默认参数的时候，两个需要一起修改。否则就会报一个

1
2
3

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src
Module not found: Error: Can't resolve './src' in '/Users/changzhn/git/webp4'
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src

因此就算和默认值相同也要加了entry属性

2.2 output.publicPath

这是我找工作的时候一道面试题

这个属性决定了，index.html文件引入静态资源的路径
比如：

1	publicPath: 'build'

开发时，该属性代表静态资源打包的路径，所以在相应index.html中引入<script src="./build/bundle.js"></script>
例如publicPath设置为 xx/build/
那么相应的index.html引入的就是 <script src="./xx/build/bundle.js"></script>
生产时，该属性。。也是这个意思，不过可以配置cdn目录
例如publicPath设置为https://bootcdn.com/changzhn/
那么相应的index.html引入就是<script src="https://bootcdn.com/changzhn/build/bundle.js"></script>

3 devServer

3.1 compress

boolean
一切服务都启用gzip压缩
测试：
|文件|大小|
| :–: | :–: |
|未压缩|337k|
|压缩|86.4k|

4 resolve

4.1 alias

提供了一些引入模板的简写名称，比如：
想引入的文件不想使用../ 和 ../../之类的，都可以从src为起始目录往下寻找

resolve: {
	alias: {
		'@': path.resolve(__dirname, '../src')
	}
}

在引入模块的时候

1	import '@/assets/common.less'

4.2 extensions

设置模块可省略的后缀名称，比如：
上面引入模块可以改成这样

1	import '@/assets/common'

如果两个模板重名的话，应该就需要加上后缀了

1 2	import '@/assets/common.css'; import '@/assets/common.less';

5 module

webpack默认只能解析js模块的，所以前端资源的css less jsx png等等都需要loader实现的

5.1 rules css

module: {
	rules: [
		{
			test: /\.css$/,
			use: [
				'style-loader',
				{
					loader: 'css-loader'
				}
			]
		}
	]
}

增加postcss-loader配置autoprefixer

其中有几点注意的地方：

解析出来的css会内嵌到页面中，如果想提取出来，需要使用loader做不了，但是plugin可以完成的
use是一个数组，里面可以直接写style-loader这样，或者以对象形式，具体配置一些options一些选项
比如要处理的less文件，只需要less-loader是不可以的。需要同时使用style-loader 和 css-loader，就是需要一级级处理，一个loader只做自己的事情，做完后交给下一个loader来处理。 TIPS：使用less-loader也需要安装less模块

use的格式

字符串
数组
对象

5.3 rules url-loader

关于url-loader和file-loader：

url-loader是基于file-loader的一层封装，可以做一些图片大小限制，小于多少kb时，可以将图片转成base64内嵌到页面中，而减少一次http请求
url-loader是依赖于file-loader的，所以使用url-loader的话，就必须安装file-loader的，否则会报错

同样地，可以使用url-loader处理图标字体

6 devtool

使用source-map的方式

一般在开发环境使用#eval-source-map
在生产环境使用#cheap-module-source-amp

具体打包速度等可以参考官网

7 plugins

7.1 html-webpack-plugin

如果output.file中使用了hash。又不想在index.html手动引入js文件，可以借助插件来完成。
在根目录下提供一个模板文件，然后可以设置title favicon等属性。

7.2 extract-text-webpack-plugin@next

提取css文件。

TIPS:
在webpack4中需要使用extract-text-webpack-plugin@next否则会报一个错

1	Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead