webpack3.x升级到webpack4.x

虽然说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并行打包

const ProgressBarPlugin = require('progress-bar-webpack-p