webpack4工具链升级排坑记录

1、webpack4号称是0配置，于是我就只设置了entry、resolve、output、module->rules之类的属性，结果通过webpack-bundle-analyzer跑出来发现只把懒加载模块的公共代码抽离出来了。

查询官方文档发现optimization.splitChunks.chunks默认为async，只从异步chunks里提取模块，因此需要设置成all

2、设置完mode，发现有一个entry在调试环境和生产环境下编译出来的文件数量不一样，百思不得其解

问题一定出在不同环境下的默认设置上，翻了翻源代码才将问题逐渐定位到optimization.splitChunks.minSize上，于是把官方文档里splitChunks的配置写在了webpack.config.base.js里，确保调试环境和生产环境下的chunk分割策略完全一致

3、由于项目使用koa2，使用web-dev-server的话，在调试的时候需要开两个窗口启两个服务，所以想找个中间件来实现HMR，选择了koa-webpack，按照文档设置好后发现编译出来的文件结果和直接用webpack编出来的结果又不一样

看了看koa-webpack的源码，先将问题定位在webpack-hot-client上，尝试将这个插件关闭（参考设置）后编译结果正常。最后定位到webpack-hot-client的这项设置上，将allEntries设为ture即可。

总结

在升级过程中还出现了好几处低级错误

• 使用vue-router懒加载时，提前import进来了需要懒加载的组件，导致懒加载失效且页面无法显示
• 懒加载语法写错了

每当出现这种明明根据文档一步一步来设置，最后却因为一些低级错误而出现很奇怪的结果时，宁愿在网上漫无目的的搜集一大堆他人的例子来无脑尝试也不愿意花时间在文档、源码的解读与理解上，容易在不断的尝试里消磨时间并积累挫败感最终决定回避问题。