您的当前位置:首页正文

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 文件中。

3 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 代替

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.