webpack3.x升级webpack4不得不说的事

最近为了某些原因需要升级webpack3到webpack4，于是着手操作了一番,此处已vue-cli为范本
1、升级webpack包
vue4由于已经将命令行部分迁移到webpack-cli，所以还得新安装一个包

npm i webpack -D
npm i webpack-cli -D

2、升级webpack-dev-server
webpack4对应的webpack-dev-server从2.x必须升级到3.x,否则会报错

npm i webpack-dev-server -D

3、升级extract-text-webpack-plugin插件
由于旧版本的extract-text-webpack-plugin插件已经不支持webpack4，所以必须升级。但是在我写下这篇文章的当下还没有正式版，只有一个测试版，可以使用
方法一：

npm i extract-text-webpack-plugin@next -D

修改配置中

new ExtractTextPlugin({
    filename: utils.assetsPath("css/[name].[contenthash].css"), // 修改前
    filename: utils.assetsPath("css/[name].[hash].css"), // 修改后
    allChunks: true
}),

//contenthash改为hash

进行升级，
配置
方法二：
官方提供的是mini-css-extract-plugin这个插件来做替代品，但是这个插件不支持HMR，故而选择了extract-text-webpack-plugin插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css'),
    chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
}),

修改build/utils.js

function generateLoaders(loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

  if (options.extract) {
      loaders.unshift(MiniCssExtractPlugin.loader)
  } else {
      loaders.unshift('vue-style-loader')
  }

  if (loader) {
      loaders.push({
          loader: loader + '-loader',
          options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
          })
      })
  }

  return loaders

}

4、升级html-webpack-plugin

npm i html-webpack-plugin -D

5、升级node-sass

npm i node-sass -D

6、升级vue-loader

npm i vue-loader -D

鉴于Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

需要下载vue-loader-plugin

npm i vue-loader-plugin -S
或
yarn add vue-loader-plugin

接着在webpack配置中添加

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

7、使用splitChunk替代commonChunkPlugins

optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false
          }
        },
        sourceMap: config.build.productionSourceMap,
        parallel: true
      }),
      new OptimizeCSSPlugin({
        cssProcessorOptions: config.build.productionSourceMap ? {
          safe: true,
          map: {
            inline: false
          }
        } : {
          safe: true
        }
      })
    ],
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 2, // 最少需要几个模块公用 
      maxAsyncRequests: 6, // 按需加载时并行请求的最大数量
      maxInitialRequests: 4, // //最大的初始化加载次数，默认为4；
      automaticNameDelimiter: '-',
      automaticNameMaxLength: 30,
      name: true, //拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        app: {
          name: 'app',
          minChunks: 3,
          priority: -20,
          reuseExistingChunk: true // 复用之前打包的模块
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`
    }
  },

8、添加mode，mode必须为development、production、none中的一个。
9、原来uglifyjs-webpack-plugin、optimize-css-assets-webpack-plugin配置在plugins中，现在修改为optimization.minimizer中配置

const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
optimization: {
  minimizer: [
      new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: config.build.productionSourceMap,
          uglifyOptions: {
              warnings: false
          }
      }),
      new OptimizeCSSPlugin()
  ]
}