webpack3.x升级到webpack4.x

最新推荐文章于 2025-08-29 14:24:45 发布

原创

最新推荐文章于 2025-08-29 14:24:45 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue-cli3 #webpack3 #webpack4

本文主要介绍如何将基于vue-cli的项目中webpack3升级到4.x。升级过程中涉及webpack配置的变化，如引入VueLoaderPlugin，HtmlWebpackPlugin调整，mode参数的设置，uglify-webpack-plugin替换，extract-text-webpack-plugin和CommonsChunksPlugin不再使用，取而代之的是minimizer和新的插件策略。同时，推荐使用happpyPack提升打包速度，并通过webpack.dll.conf.js加速构建。建议读者亲自实践以加深理解。

虽然说webpack5都已经出了，但是，可能有一部分人还在用webpack3，因此这篇文章主要是基于vue-cli中到项目配置，从webpack3升级到4.x。

由于webpack3升级到4以后，很多配置项发生了变化，因此在升级过程中会遇到很多坑。

1. webpack.base.conf.js

首先。从webpack.base.conf.js开始，输入输出和上下文配置基本一样的，这边在plugin的位置引入了VueLoaderPlugin，同时把HtmlWebpackPlugin也提取到这里

plugins: [
  new VueLoaderPlugin(),
  new HtmlWebpackPlugin({
    filename: `index.html`,
    template: root + '/index.html',
    // favicon:path.resolve('favicon.ico'),
    prod: true,
    hash: true,
    minify: {
      removeAttributeQuotes: true,
      collapseWhitespace: true,
      html5: true,
      minifyCSS: true,
      removeComments: true,
      removeEmptyAttributes: true
    }
  }),
]

2. webpack.dev.conf.js

webpack4必须引入一个mode参数左右判断dev和prod的环境，

基本的一些配置信息还是相同的，下图左侧位webpack3的配置，右侧是webpack4的配置。

3. webpack.prod.conf.js（重点在这个文件）

1）webpack4取消了uglify-webpack-plugin这个插件，改用了minizer这个属性

optimization: {
    noEmitOnErrors: true,
    minimizer: [
      // new UglifyJsPlugin({
      //   cache: true,
      //   parallel: true,
      //   sourceMap: false // set to true if you want JS source maps
      // }),
      new OptimizeCssAssetsPlugin({
        cssProcessor: require('cssnano')
      })
    ],
    splitChunks: {
      chunks: 'all'
    }
  },

2）extract-text-webpack-plugin，CommonsChunksPlugin这个插件也不再适用

3）引入了happpyPack并行打包