记一次vue项目webpack升级

2024年3月25日 202次阅读 来源: fuqihan

遇到的坑

  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
      }
    }
  }
},

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

    原文作者：fuqihan
    原文地址: https://segmentfault.com/a/1190000018762158
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞