webpack4 升级为 webpack5

webpack5带来了几个非常管用的新特性，包括

• 开箱即用的持久化缓存
• 优雅的资源处理模块
• 打包体积优化

升级的变化

1.1 命令行env的传参格式变化

• 错误示范

• 正确操作

Webpack5不再需要使用--env.key=value的语法，现在使用--env key=value

2.2 webpack-dev-server命令调用方式变化

• webpack-dev-server config.js->webpack server config.js

出于兼容考虑，我们需把webpack-dev-server升级到最新版本

$ npm install -D webpack-dev-server@latest

1.3 资源加载配置方式的变化

webpack5之前，通过url-loader与file-loader等loader来决定一些静态资源的加载。

而现在我们只需要指定type：

• asset/resource会将对应的资源加载成url，对应以前的file-loader
• asset/inline导出一个资源的data URL，对应以前的url-loader
• asset/source，对应以前的 raw-loader
• asset，可以在这里通过限制limit 来决定使用inline还是resource

rules: [
	{
		test: /\.(png|gif|jpe?g|svg|bmp)$/i,
    type: 'asset/resource',
    exclude: resolve('src/assets/icons'),
    generator: {
      filename: 'img/[hash:7].[ext][query]',
    },
  },
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: 'asset/resource',
    generator: {
      filename: 'fonts/[hash:7].[ext][query]',
    },
  },
]

1.4 核心包依赖版本升级

"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3",

webpack升级到5.x的情况下，至少需要把这些webpack相关的依赖包更新到最新版本（我这里都是通过@latest更新）

npm install webpack@latest webpack-cli@latest webpack-dev-server@latest

1.5 需要手动注入Node polyfill

依据官方的说法，webpack5之后不再默认为工程注入NodeJS polyfill，即如果你在webpack4版本的代码中使用了类似process这样的Node变量，需要手动安装依赖与配置fallback。

当然这是一个好事情，因为不需要注入所有垫片，可以减少构建体积

#1 依赖对应

检查下表，这是webpack官方给出webpack4使用的polyfill包

#2 通过fallback注入垫片

#3 代码的改变

像process的使用在webpack4是无需导入的，但是在webpack5这里我们最好手动导入

1.6 替换或者升级不兼容webpack5的插件

举个例子，QAPM项目中使用到了webpack-cos-plugin插件进行生产环境下编包自动上传，然而遗憾的是webpack-cos-plugin最新版也只支持到webpack4，在这种情况下我们只能替换插件。

幸运的是社区有同学开发了webpack5-cos-plugin，完全兼容webpack-cos-plugin

另外:

• HardSourceWebpackPlugin增加编译缓存 webpack5暂不支持