This website requires JavaScript.

webpack4 升级指北

2018.09.06 07:42字数 3985阅读 541喜欢 4评论 3

webpack4 升级指北

本文将对实际项目 webpack4 升级步骤进行整理,以及遇到的坑及解决方式总结。

使用 webpack 构建的项目配置相对繁琐,而且随着项目越来越大会发现打包速度越来越慢,我司前端使用 vue 的架构并且使用 i18n 打包成多语言发布,在这种情况下打包速度大几分钟,影响开发效率,6月份在小马哥的努力推动下,我们对现有 vue 项目升级了 webpack4,线上稳定运行了将近两个月,今天提笔将升级的过程以及升级中遇到的坑,跟大家分享一下~

一、升级前后打包时间对比

升级前
升级后

前后10倍的提升,话不多说,开始冒险吧

二、升级过程

2.1 工具升级

  • 2.1.1 webpack 版本升级到4.X,目前项目中是4.12.2,以及安装 webpack-cliwebpack4 启动辅助)

    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8",
    
  • 2.1.2 用到的 loaderplugin 升级
    老版本大部分不支持 webpack4,具体版本可去npm自行查找

  • 2.1.3 webpcak4修改了插件内部的写法,webpack-dev-middlewarewebpack-hot-middleware 等插件同样需要升级版本

2.2 配置升级

  • 2.2.1 mode 修改

    只有本地开发是 development,只要需要打包的环境都是 production,全局变量自己单独再配置就好,这里production 更多的作用是带来了很多默认优化配置

    webpack.dev.conf.js

webpack.release.conf.jswebpack.prod.conf.js

  • 2.2.2 移除 CommonsChunkPlugin, 添加optimization配置

    webpack4 移除 CommonsChunkPlugin, 并默认启用了它的许多功能。webpack4 可以实现很好的默认优化。同样对于需要自定义的缓存策略的配置,我们也可以使用 optimization.splitChunksoptimization.runtimeChunk(添加optimization 配置)

    升级之前的抽离出的 vendormanifest 两个文件可以通过这两个配置生成

  • 2.2.3 配置 UglifyJsPlugin 的功能

    可以通过 optimization.minimize= true 来启用默认压缩策略,也可根据实际情况去自行配置,详细配置请关注 ( https://github.com/mishoo/UglifyJS2) (这里去掉了 webpack-parallel-uglify-plugin 改用 uglifyjs-webpack-plugin )

      minimizer:[
        new UglifyPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: true,
              collapse_vars: true,
              reduce_vars: true
            },
            mangle: {
              safari10: true
            },
            output: {
              beautify: false,
              comments: false
            }
          },
          cache: true,
          parallel: true
        })
      ]
    
  • 2.2.4 使用 mini-css-extract-plugin 抽离 css

    Webpack4 以后对 css 模块支持的逐步完善,建议使用 mini-css-extract-plugin 插件代替 extract-text-webpcak-plugin 插件


  • 2.2.5 插件的引用顺序

    webpack4 中对插件引用顺序有了严格的要求,例如:manifest 内联设置顺序设置,使用 inline-manifest-webpack-plugin 是基于 webpack-html-plugin 的钩子的,所以在 plugin 执行顺序上,要保证提供钩子的插件提前调用

  • 2.2.6 自定义写法的修改

    compiler.plugin ==> compiler.hooks 去绑定到自定义插件上

    改之前

    avatar

    改之后

三、升级中遇到的坑及解决方式

3.1 本次升级过程中遇到的最大的一个问题就是,构建过程中出现内存溢出

出现原因:上文已经提及我们的项目是多页面多语言的,是在构建过程中将一个页面通过 html-webpack-plugin 分别打包成不同的语言文件,html-webpack-plugin 每次实例化时都会创建 Compilation,在编译时会大量创建,影响性能,目前GitHub有commit解决此性能问题,在多个 htmlwebpackplugin 实例重用一个编译器 Compiler,暂时官方版本还用不上

解决方案:先将此beta版本拿到本地使用,官方升级后在替换即可

3.2 页面左右结构,样式定义宽度分别50%,会出现折行现象

出现原因: vue-loader 升级后,压缩后的html,同级标签之间会增加一个空格!!!!

解决方案:vue-loader.conf.js 中增加 压缩配置

~全文完,文中如有不妥之处,欢迎批评指正~