webpack@4.x迁移webpack@5.x记录，减少了1.2%的构建体积

Posted 2021-09-24 写个程序换个饼

本文记录了GridManager表格组件升级webpack@5.x时的过程及遇到的问题, 包含了build, start, test等相关命令的问题修复。

测试兼容性

尝试在webpack@4.x的配置中添加如下选项，测试当前环境对webpack@5.x的兼容性。

module.exports = {
  // ...
  node: {
    Buffer: false,
    process: false
  }
};

如果出错需要更新node版本，当前使用的node版本为v14.0.0。
注意: 测试完后需要清除这部分代码。

升级依赖包

• webpack: v4.x=> v5.x
• webpack-cli: v3.x => v4.x

升级过程中遇到的问题

1、npm run start 报错:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

解决方式为更新其他依赖项:

• css-loader: 2.x => 5.x
• less-loader: 4.x => 8.x
• mini-css-extract-plugin: 0.x=> 1.x

2、npm run build 报错

虽然build命令以报错结束，但是build文件却已经构建完成

[webpack-cli] [Error: EISDIR: illegal operation on a directory, open \'/Users/baukh/work/GridManager/dist\'] {
  errno: -21,
  code: \'EISDIR\',
  syscall: \'open\',
  path: \'/Users/baukh/work/GridManager/dist\'
}

这是因为copy-webpack-plugin在版本更新到7.*后，API有所变更导致的，解决方式为: 按新的API进行更新配置项。

3、npm run test 报错

当前项目使用的是karma单元测试，当更新karma-wepback@5.x后，原本可正常执行的单元测试报错，错误信息为is not function。
这是因为karma-wepback@5.x中默认开启了chunk, 可以通过karma-wepback增加指定项进行解决:

optimization: {
    runtimeChunk: false,
    splitChunks: false
},

如需查看详情，可点击相关链接。

4、导入json文件报错

json文件需要使用具名导出，webpack@5.x不再支持从import中解构

// 会发出警告
import { version } from \'./package.json\';

// 需要替换为
import pak from \'./package.json\';
const version = pak.version;

执行成功

当所有script全部执行成功后，查看通过webapck@5.x构建的体积为: 83773，较webpack@4.x的84809减少约1.2%。如果项目本身足够大，所节约的体积很是可观。

如果想查看详细的配置信息，可点击进入github进行查看。