记一次vue项目webpack升级

遇到的坑

1. webpack一定要锁版本，这东西的版本感觉是一个大坑，说不定这个版本支持，下个版本就不支持了，只能是在issue里看到别人提pr，然后说下个版本修复，尴尬的要死
2. MiniCssExtractPlugin得放在vue-style-loader后面
3. 如果是ssr项目，babel升级的影响会比较大，其他都可以升级，babel要慎重

涉及依赖升级

webpack
webpack-cli
webpack-dev-server
mini-css-extract-plugin
html-webpack-plugin
babel (且升且珍惜)

步骤

1. 添加mode,区分开发和生产，开发编译速度快，生产打包体积小
2. 删除extract-text-webpack-plugin(webpack4不推荐)，添加mini-css-extract-plugin依赖或升级extract-text-webpack-plugin版本

if(process.env.NODE_ENV === 'production') {
  return ['vue-style-loader', MiniCssExtractPlugin.loader
  ].concat(loaders);
}
return ['vue-style-loader'].concat(loaders)

3.删除CommonsChunkPlugin(webpack4弃用)，添加splitChunks

optimization: {
  minimize: false,
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: "all",
        test: /[\\/]node_modules[\\/]/,
        name: "vendor",
        minChunks: 1,
        maxInitialRequests: 5,
        minSize: 0,
        priority: 98
      }
    }
  }
},

至此，旧项目升级就完成了