vue cli 平稳升级webapck4

时间 2019-11-11

标签 vue cli 平稳升级 webapck4 webapck 繁體版

原文原文链接

webpack4 released 已经有一段时间了，插件系统趋于平稳，适逢对webpack3的打包速度很不满意，所以决定将当前在作的项目进行升级，正好也实践一下webpack4。

新特性

0配置

应该是parcel出来之后，webpack团队意识到其配置确实有点复杂，不太容易上手。so, webapck4 开始支持0配置启动。不过，万变不离其宗，webpack4的0配置也只是支持了默认entry 和 output而已，即默认entry为./src,默认output为/dist。javascript

模式选择mode

mode有两个可选项，production & development。做为必选项，mode是不可缺省的。在production模式下，会默认作一些必要的优化，如代码压缩和做用域提高，还会默认指定process.env.NODE_ENV 为 production。在development模式下，优化了增量构建，支持注释和提示，而且支持 eval 下的 source maps，同时默认指定process.env.NODE_ENV 为 development。css

sideEffects

经过该配置能够大幅度减少打包体积。当模块的 package.json 配置sideEffects:false代表该模块没有反作用，也就意味着 webpack 能够安全地清除被用于重复导出(re-exports)的代码。html

模块类型

webpack4提供了5种模块类型。vue

json: 可经过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)

webassembly: WebAssembly 模块，（目前是 .wasm 文件的默认类型）

javascript/auto: (webpack 3中的默认类型)支持全部的JS模块系统：CommonJS、AMD。

javascript/esm: EcmaScript模块（默认 .mjs 文件）。

javascript/dynamic: 仅支持 CommonJS &amp; AMD。

JSON

webpack 4 不只支持本地处理 JSON，还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时，webpack 会消除掉JSON Module 中未使用的导出。此外，若是要用 loader 转换 json 为 js，须要设置 type 为 javascript/auto。java

optimization

Webpack 4 删除了 CommonsChunkPlugin，并默认启用了它的许多功能。所以webpack4能够实现很好的默认优化。可是，对于那些须要自定义的缓存策略，增长了 optimization.splitChunks 和 optimization.runtimeChunk。具体解释可参考这篇文章，解释得很详细。RIP CommonsChunkPlugin
。node

手把手升级

我是把原来vue cli的项目作了一下升级，整体来讲，升级还算是比较顺利步骤，这里咱们分红两步走，首先升级相关依赖的插件，而后优化webapck配置文件。webpack

升级插件

首先要把下面列表的插件升级到对应版本或者最新版本git

webpack@4.4.1
css-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

若是遇到其余包报错，应该是升级到最新的就能够解决了。github

更新配置文件

webpack.dev.conf.js

dev环境变化不大，毕竟webpack4很大一部分的优化都是针对生产环境的，该文件咱们只须要删除一些再也不须要的插件既能够。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已经默认配置。同时，要设置web

mode: 'development'

webpack.production.conf.js

webvpack4中改动最大，影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。之前的CommonsChunkPlugin主要用来抽取代码中的共用部分，webpack runtime之类的代码，结合chunkhash，实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能，而且配置更加灵活，具体解释可参考这篇文章，解释得很详细。RIP CommonsChunkPlugin

mode: 'production',
optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        chunks: 'initial',
        name: 'vendors',
      },
      'async-vendors': {
        test: /[\\/]node_modules[\\/]/,
        minChunks: 2,
        chunks: 'async',
        name: 'async-vendors'
      }
    }
  },
  runtimeChunk: { name: 'runtime' }
}

总结

整体来讲本次升级还算顺利，不到一天搞定，目前感受，打包速度大约优化了70%左右，同时打包后的代码体积也有了很大的优化，带来的效果很显著的。
若是以为我没有说明白，这里有一份配置，请拿走

原文地址：https://segmentfault.com/a/1190000014169887