webpack 4 升级
1 html-webpack-plugin 已支持webpack 4
2 inline-manifest-webpack-plugin 的升级替换
inline-manifest-webpack-plugin 插件本身已支持webpack 4, 但从测试看有bug,不能将生成的manifest.js 插入到frontend-js.html 文件中。
解决方案,使用webpack-inline-manifest-plugin
https://github.com/szrenwei/inline-manifest-webpack-plugin/issues/10
3 extract-text-webpack-plugin 的升级替换
项目主页:https://github.com/webpack-contrib/extract-text-webpack-plugin
Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.
官方推荐使用 mini-css-extract-plugin 代替
因此根据mini-css-extract-plugin(https://github.com/webpack-contrib/mini-css-extract-plugin) 项目介绍 ,添加了一些mini-css-extract-plugin 的高级配置
4 CommonsChunkPlugin 废弃
提取common vendor。
5 不再使用 inline-chunk-manifest-html-webpack-plugin
项目没有更新,插件不支持webpack 4,考虑到本插件优化作用不大,可以先不用。
6 统一使用url-loader 处理非js,css(scss)等资源
webpack在处理非js和css(scss)时,统一使用url-loader 。url-loader 本身是对file-loader 的扩展,当文件大小超过规定的限制时(目前limit为3kb),则将文件资源输出到指定文件夹中。
7 优化首屏,减少网络条件差时的白屏时间
head 里面的css 阻塞进程,使用webpack 3 时的CSS文件637kb。使用webpack 4 后,将url-loader limit 限制在3kb,使转base64 的资源越少越好,尽量不占用css的的空间。目前生产环境CSS 文件大小474kb。
8 升级后变化
升级前 build Done in 34.25s.
升级后build Done in 22.72s.