vue项目 webpack4升级实践

最近将vue项目的打包工具webpack升级到了V4，原有配置是基于Vue-CLI 2生成的，其中部分过程做了微调。方便起见，就直接在原有基础上通过安装新依赖，调整配置，最后也顺利完成了升级。

webpack4 新特性

webpack4发布

据官方发布消息称，webpack4有以下几个特点：

1. webpack 4 速度提升98%

其实，实测下来，提示性能普遍在50% ~ 60%之间，如果项目本身就比较小，速度提升则更不明显。Anyway，有提升就好。

2. 引入mode，包含默认配置

mode有两个值 development和production 即开发模式和生产模式当你设置不同的mode时，会默认开启以下特性：

development

浏览器调试工具
注释、开发阶段的详细错误日志和提示
快速和优化的增量构建机制

production

开启所有的代码优化过程
更小的bundle大小
去除掉只在开发阶段运行的代码
Scope hoisting和Tree-shaking

3. 插件变化：移除CommonsChunkPlugin等，使用新的配置项optimization代替

webpack新增optimization选项，主要用于构建过程中的代码优化，常用配置如下所示：

// webpack4 新增优化选项 提供minify splitChunks等功能
optimization: {
  minimize: true, // 默认开启压缩
  minimizer: [
    // ES 压缩
    new TerserPlugin({
      cache: true,
      parallel: true,
      sourceMap: config.build.productionSourceMap,
      terserOptions: {
        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        warnings: false,
        compress: {
          drop_console: true
        }
      }
    }),
    // CSS 压缩 去重
    // Compress extracted CSS. We are using this plugin so that possible duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    })
  ],
  // 提取webpack运行时的代码
  runtimeChunk: {
    name: 'manifest'
  },
  // 提取公共模块，防止模块重复打包 代替CommonsChunkPlugin
  splitChunks: {
    chunks: 'async',
    minSize: 30000, // 形成一个新代码块最小的体积
    minChunks: 1,
    maxAsyncRequests: 5, // 按需加载时候最大的并行请求数
    maxInitialRequests: 3, // 一个入口最大的并行请求数
    automaticNameDelimiter: '~',   // 打包分割符
    name: true,
    cacheGroups: {
      // 拆分样式
      styles: {
        name: 'styles',
        test: /\.css$/,
        chunks: 'all',
        enforce: true,
        priority: 1000
      },
      // 单独拆分vue框架
      vueFramework: {
        name: 'vueFramework',
        test: (module) => {
          return /vue|vue-router|vuex/.test(module.context);
        },
        chunks: 'initial',
        priority: 200,
      },
      // 拆分其他vendor
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'initial',
        priority: 100
      }
    }
    }
}

4. 增加webAssembly支持

5. 支持多种模块类型

javascript/auto: 在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。
javascript/esm: 只支持ESM这种静态模块。
javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
json: 只支持JSON数据，可以通过require和import来使用。
webassembly/experimental: 只支持wasm模块，目前处于试验阶段。

6. 推崇0配置

webpack受parcel rollup等打包工具启发，从v4版本不再强制需要webpack.config.js，以做到开箱即用。通过命令行 webpack --mode development 即可对小型项目打包

如何升级

更新node版本 >=8.9.4 (recommend version)
安装最新的 webpack4 webpack-dev-server webpack-cli（命令行工具）
将webpack loader、plugin升级至最新版本，包括但不限于html-webpack-plugin、 friendly-errors-webpack-plugin、terser-webpack-plugin、file-loader、url-loader等。其中extract-text-webpack-plugin直接删掉，因为不兼容webpack4，替换为mini-css-extract-plugin，即新的css抽离插件。还需引入vue-loader插件
去掉这些插件：NoEmitOnErrorsPlugin、ModuleConcatenationPlugin、NamedModulesPlugin、CommonsChunkPlugin，因为这些都将升级为optimization配置项，而不是以插件形式继续存在。分别变成 optimization.noEmitOnErrors、optimization.concatenateModules、optimization.namedModules和optimization.splitChunks

plugins: [
  // 引入vue-loader插件
  new VueLoaderPlugin(),
  new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css')
    })
]

引入mode模式之后，会自动设置process.env.NODE_ENV，所以需要去除多余的环境变量设置
升级后试运行，运行过程中如遇插件或loader报错，则将其升级至最新版本，如仍有问题再进一步解决。

Vue CLI 3.0 +

如果嫌手动配置webpack4麻烦，（毕竟不是人人都是webpack配置工程师。。。）那可以直接采用vue cli3重新搭建一套脚手架。

vue cli 官网

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack4 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装运行

npm install -g @vue/cli
或者
yarn global add @vue/cli

vue ui

然后，一切都是你熟悉的图形化配置了，vuex? vue-router? babel? eslint? typescript? unit test?等等，统统一键加入你的项目中，相当方便。

WarpPrism / Blog