正文
webpack 4发布也有一段时间了，虽然官方的文档，升级指南都没有完成，部分插件适配webpack 4的开发也还在进行中，但对于一个资深前端配置工程师，大刀早已饥渴难耐，所以就出一份非官方升(cai)级(keng)指南吧。
我没时间看你废话，给我一份配置
webpack 4做了很多改进，我就挑一些我比较关心的点来展开
0CJS
随着像
parcel
这样零配置，开箱即用打包工具的流行，被人吐槽难用，难懂，难配置的webpack显然感受到了压力，在4.0的版本中，给部分配置加上了默认值，并引入了
mode
概念，为开发，及生产环境提供两种不同的默认配置，极大的简化了webpack的配置。在4.0版本中，你甚至不需要配置，即可使用(虽然没什么用)。
默认值
1
2
3
4
5
6
7
|
module.exports = {
entry: 'src/',
outpu: {
filename: '[name].js',
path: 'dist/'
}
}
|
webpack 4中引入的
mode
是必需设置的（如果没有设置，会报警），你可以通过
webpack --mode ...
来设置，也可以通过
webpack.config.js
来设置。
1
2
3
|
module.exports = {
mode: 'development' // development || production
}
|
mode
也是为了简化配置项，不同的
mode
会为我们设置不同的默认配置，就不需要我们一个个去分别配置了。
开发模式更关注开发体验：
-
更利于浏览器调试
-
更快的增量编译速度
-
更详细的报错消息
生成模式更关注用户体验：
详细的说明可以参考
这篇文章
Loader与Plugin
loader的其实没有什么变化，我用到的loader升级到最新版都可以直接用，有些甚至不用升级。变化比较大的是plugin。
webpack 4使用了新的插件体系，导致之前的插件基本都是需要改的，那么这些插件目前对webpack 4的支持如何呢？
RIP CommonsChunkPlugin
上面讲到的都是一些第三方的插件改动，而改动最大，影响也最大的就是webpack 4使用
optimization.splitChunks
替代了
CommonsChunkPlugin
，并且支持移除了
CommonsChunkPlugin
，所以这部分迁移起来比较麻烦。
对于各位配置工程师来说，
CommonsChunkPlugin
应该是很熟悉了，我们主要用他来抽取代码中的共用部分，
webpack runtime
之类的代码，结合
chunkhash
，实现最好的缓存策略。而这一部分，也是webpack支持的比较差的，这个几乎三岁的
issue
，至今还没有解决。对这个问题比较感兴趣的，可以拜读一下这篇
文章
。我这里就不展开了，直接贴一份
CommonsChunkPlugin
时代解决这个问题的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
module.exports = {
...
plugins: [
...
new webpack.HashedModuleIdsPlugin(),
new webpack.NamedChunksPlugin(chunk => {
if (chunk.name) {
return chunk.name
} else {
return 'faceless-chunk' // a chunk has no name
}
}),
new webpack.optimize.CommonsChunkPlugin({
|
