webpack@3升级webpack@5

起服务变化

// 之前
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

// webpack5
webpack serve --config build/webpack.dev.conf.js --progress --mode development

webpack3升5之后，webpack.config.js文件里很多配置都会报错，因为v3和v5的配置schema不同了。这些可以从控制台报错的时候提示看出来。

比如：

v5的node配置泛型有变化，之前

// v3的时候配置的

node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
   // source contains it (although only uses it if it's native).
   setImmediate: false,
   // prevent webpack from injecting mocks to Node native modules
   // that does not make sense for the client
   dgram: 'empty',
   fs: 'empty',
   net: 'empty',
   tls: 'empty',
   child_process: 'empty'
}

// v5的node泛型约定是 boolean | object
node: boolean | {
   global: boolean | 'warn';
   __filename: boolean | 'mock' | 'warn-mock' | 'eval-only';
   __dirname: boolean | 'mock' | 'warn-mock' | 'eval-only'
}

参考文档：https://webpack.docschina.org/configuration/node/#node

devtool的泛型有变化
v3的dev环境配置的devtool: 'cheap-module-eval-source-map'，生产环境配置的devtool: '#source-map'
v5的dev环境配置改成：devtool: 'cheap-module-source-map'，生产环境配置的devtool: 'source-map'
v3的hot、clientLogLevel、contentBase配置，不再需要
devServer.before(app) 改成onBeforeSetupMiddleware(devServer)，形参变化后

const app = devServer.app;

要注意改一下。

各种loader变化

包括

less-loader
css-loader
eslint-loader
file-loader
url-loader
vue-loader
vue-style-loader
升级到webpack5有个好处就是安装新的loader时候不用担心版本问题，基本旧的直接卸载，然后安装时候不指定版本号就全是最新版本的loader，也都是可以work的。

记录一下我的loader版本升级：

less-loader "^4.1.0" -> "^11.0.0"
css-loader "^0.28.0" -> "^6.7.1"
eslint-loader "^1.7.1" -> "^4.0.2"
file-loader "^1.1.4" -> "^6.2.0"
url-loader "^0.5.8" -> "^4.1.1"
vue-loader "^13.3.0" -> "^15.9.8"
vue-style-loader "^3.0.1" -> "^4.1.3"

在升级vue-loader后，报了一个错，控制台显示的是 .vue文件没有被解析，报错的地方有style部分，有template部分。配报错提示：

"You may need an additional loader to handle the result of these loaders."

解决方式：添加一个VueLoaderPlugin

const {VueLoaderPlugin} = require('vue-loader');
// webpack.config.js 添加插件
{
   plugins: [
       new VueLoaderPlugin()
   ]
}

// OK，可以顺利解析到.vue文件！

Plugins变化

uglify-js-plugin不在需要，改用terser-webpack-plugin，配置在optimization中。

// webpack5
const TerserWebpackPlugin = require('terser-webpack-plugin');
module.exports = {
   // ..
   optimization: {
   // ..
   minimize: true,
   // 添加extractComments配置，否则产出的文件里会有一个.LICENCE.txt文件
   minimizer: [new TerserWebpackPlugin({extractComments: false})]
 }
}

CopyWebpackPlugin需要升级一下新版本，然后配置的范式有所变化，之前插件的配置项options直接是一个数组，现在变成

constructor(options?: PluginOptions | undefined);
type StringPattern = string;
type ObjectPattern = {
 from: From;
 globOptions?: import("globby").Options | undefined;
 context?: string | undefined;
 to?: To | undefined;
 toType?: ToType | undefined;
 info?: Info | undefined;
 filter?: Filter | undefined;
 transform?: Transform | undefined;
 transformAll?: TransformAllFunction | undefined;
 force?: boolean | undefined;
 priority?: number | undefined;
 noErrorOnMissing?: boolean | undefined;
};

type Pattern = StringPattern | ObjectPattern;
type PluginOptions = {
 patterns: Pattern[];
 options?: AdditionalOptions | undefined;
};

CommonsChunkPlugin不在需要，改由optimization配置完成，可以在optimization.splitChunk.cacheGroups里完成公共chunk的抽取。配置范式类似之前CommonsChunkPlugin的配置。

参考链接：https://webpack.docschina.org/plugins/split-chunks-plugin/

ExtractTextPlugin插件不再需要，改用MiniCssExtractPlugin。
配置参考链接：https://webpack.js.org/plugins/mini-css-extract-plugin/#root
v3时候的webpack.HashedModuleIdsPlugin() 需要换成webpack.ids.HashedModuleIdsPlugin()
v3的ModuleConcatenationPlugin不再需要.