首页 > 编程学习 > webpack升级,3升5

webpack升级,3升5

发布时间:2022/10/1 7:52:16

起服务变化

// 之前
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不同了。这些可以从控制台报错的时候提示看出来。

比如:

  1. 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

  1. devtool的泛型有变化
    v3的dev环境配置的devtool: 'cheap-module-eval-source-map',生产环境配置的devtool: '#source-map'
    v5的dev环境配置改成:devtool: 'cheap-module-source-map',生产环境配置的devtool: 'source-map'
  2. v3的hotclientLogLevelcontentBase配置,不再需要
  3. 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变化

  1. 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})]
 }
}
  1. 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;
};
  1. CommonsChunkPlugin不在需要,改由optimization配置完成,可以在optimization.splitChunk.cacheGroups里完成公共chunk的抽取。配置范式类似之前CommonsChunkPlugin的配置。

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

  1. ExtractTextPlugin插件不再需要,改用MiniCssExtractPlugin
    配置参考链接:https://webpack.js.org/plugins/mini-css-extract-plugin/#root

  2. v3时候的webpack.HashedModuleIdsPlugin() 需要换成webpack.ids.HashedModuleIdsPlugin()

  3. v3的ModuleConcatenationPlugin不再需要.

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号