webpack3.x 升级 4.x 爬坑记录

爬坑记录

1. yarn add webpack webpack-cli webpack-dev-server（webpack 4.x 必须按照webpack-cli）
   [外链图片转存失败(img-9tjlfEur-1563849684749)(evernotecid://40D3211D-B208-44B3-8519-DA455D3E71EE/appyinxiangcom/8086037/ENResource/p1727)]
2. webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.js压缩插件过期问题解决
   [外链图片转存失败(img-kQJnAbds-1563849684751)(evernotecid://40D3211D-B208-44B3-8519-DA455D3E71EE/appyinxiangcom/8086037/ENResource/p1728)]
3. Plugin could not be registered at ‘html-webpack-plugin-before-html-generation’. Hook was not found.
   调整 new HtmlWebpackPlugin（）及new InterpolateHtmlPlugin（）顺序
4. css压缩由extract-text-webpack-plugin更改为mini-css-extract-plugin 详细配置见官网：https://github.com/webpack-contrib/mini-css-extract-plugin
5. 需要升级各种loader，依次升级，运行代码，查看报错，缺啥补啥，例如：html-webpack-plugin，react-dev-utils等等
   Chunk.initial was removed. Use canBeInitial/isOnlyInitial()
   [外链图片转存失败(img-FGV6cfRm-1563849684751)(evernotecid://40D3211D-B208-44B3-8519-DA455D3E71EE/appyinxiangcom/8086037/ENResource/p1729)]

其他参考资料:
官方文档：https://www.webpackjs.com/
css抽取插件：https://github.com/webpack-contrib/mini-css-extract-plugin
静态指纹：https://juejin.im/entry/59cf5e3d6fb9a00a627161df

• package.json:/Users/fayhuijuan/Projects/JD/test/mytest/fe-wolf/package.json
• webpack.config.prod.js：/Users/fayhuijuan/Projects/JD/test/mytest/fe-wolf/config/webpack.config.prod.js

---

升级优化

1. clean-webpack-plugin 安装（build前自动删除已构建文件）
2. Friendly-errors-webpack-plugin (构建日志优化展示)