前一阵子被一些关于 webpack 4 的文章安利，说其编译性能大幅提升...
遂无比向往，一直等它文档更新，且想着找时间去实践一翻，看是否真的那么神~~
先总结下 webpack 4 带给我们的一些明显的变化，然后围绕它们说说我的实际体验感受
毕竟别人吹得再神，不如自己亲身体验一把，小马过河的道理，大家都懂
1.除了安装 webpack，还要安装 webpack-cli
让人感觉挺不爽的一个改动...
这年头...各种 cli...
很多孩子因为 cli 而丧失了研究和动手的能力...
2.所谓的“零配置”
自带默认出入口（默认入口：“./src/index.js”，默认出口：“./dist/index.js”）
对于这个变化，对我而言影响为0。压根就完全没影响...
这个零配置，对于一些从0开始的项目有其意义
但对于一些经过自定义的，或者打算从 webpack 2 或 webpack 3 迁移到 4 的项目来说，完全没意义。
因为这一类项目通常出入口都已经配好了，完全不需要为了这默认出入口而去折腾，修改入口文件的目录和文件名。
再有就是，零配置的默认处理仅限出入口和文件压缩...
通过指定 mode 为 production 来优化压缩，指定 mode 为 development 则是优化构建速度
其他该有的配置还是得有，什么加载器杂七杂八的，到最后，你会发现你的配置文件没少多少东西
但这有啥所谓，选择 webpack 的人，对它的配置肯定是能适应的，选择它是因为它强大的功能，和配置是否简单压根没半毛线关系
一个项目只做一次基本就很少变动工作，谁会稀罕它配置简化带来的时间节省？
至于上手难度降低嘛...对于刚接触 webpack 的少年是有意义的，对于已经习惯的人，就无感了
3.编译性能优化
通过对一个中大型项目进行 webpack 2 至 webpack 4 迁移，编译实践所得的数据是：
迁移前（不压缩代码）耗时：11134ms
迁移前（压缩代码）耗时：26643ms
迁移后（不压缩代码）耗时：15793ms
迁移后（压缩代码）耗时：31815ms
上面两个值不是平均值，会有约1秒的时间浮动...
但哪怕再怎么浮动它们的耗时差距还是说明， webpack 4 比 webpack 2 编译慢...
为什么会这样...说好的性能提升呢...
我尝试看了一下 webpack 4 的编译结果，发现有一些多个文件都有用到的代码（被多次引用的组件），并提取到了一个文件中
这样一来，打包后的文件总 size 是减少了的
所以不难推测， webpack 4 之所以编译耗时会增加，是把时间花在了一些优化处理上，上面所说的只是其中之一
可能还有一些我没发觉的优化点
4.无法通过命令行来指定 NODE_ENV 环境变量了，默认它的值和 mode 的值一样
这点对于我来说影响非常非常大！
我们的项目本身是需要适配多个环境（开发环境，两个测试环境，预发布环境，生产环境）
但 webpack 4 支持的 mode 只有 development 和 production 或者 none
只能说，因为这个限制，再加上编译时间更长两点，我会选择不做升级迁移...
5.移除 CommonsChunkPlugin 替换为 optimization.splitChunks
总体来说，影响不大，只不过是把 plugins 里的 CommonsChunkPlugin 移除
然后加上下面一段配置（来自官方文档，没做任何修改，具体属性代表什么没深究，自己去官网琢磨吧...）
optimization: { splitChunks: { chunks: 'async', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } } }
之后编译结果就几乎一模一样了
只是多了上面说的，把多次被引入的组件再抽离提取了一下，进一步优化包 size
6.提取样式到单独文件的 extract-text-webpack-plugin 不再适用，请使用 mini-css-extract-plugin
具体使用方式请自行前往 mini-css-extract-plugin 的 github 查看
这里我就不再废话了...
然后压缩 CSS 还需要用 optimize-css-assets-webpack-plugin 搭配 cssnano
添加 CSS 前缀适配我依然还是用 postcss