关于前端:webpack4x迁移webpack5x记录减少了12的构建体积

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