本文记录了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进行查看。