WADesk 升级 Webpack5 一些技术细节认识5和4的区别在哪里

背景

升级过程中发现有很多新的知识点，虽然未来可能永远都不会再遇到，但是仍然是一次学习的好机会，可以让自己知道，打包软件的进化之路，和原来 Webpack 4 版本的差异在哪里。

移除的依赖记录

• @babel/register: 在 Node.js 16 中，许多现代语法已被原生支持，通常不再需要运行时转译。

• babel-plugin-transform-runtime: 已被 @babel/plugin-transform-runtime 替代。

• file-loader 和 url-loader: Webpack 5 已内置资源处理（Asset Modules），无需额外的加载器。

• json-loader: Webpack 5 已原生支持 JSON 导入。

对于资源文件，Webpack 自带的 assert 处理非常简单，配置也非常简单

因为注入脚本是一整套塞进去的，字体，css，html 都应该打包在一个 js 里面，以 base64 方式注入，其中 dataUrlCondition 这个配置非常棒，只要将 maxSize 设置得足够大，就可以将字体文件也打包到 js 文件里面去，这样就特别方便 DOM 的注入和挂载

// 使用 Webpack 5 的 Asset Modules 处理资源文件
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 10000, // 小于 10kb 的文件转为 base64},},generator: {filename: 'imgs/[name][ext]',},
},
{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 100000,},},generator: {filename: 'fonts/[name][ext]',},
},

过时的 babel 插件

• @babel/plugin-proposal-class-properties

• @babel/plugin-proposal-nullish-coalescing-operator

• @babel/plugin-proposal-optional-chaining

• @babel/plugin-proposal-private-methods

批量移除它们，proposal 这些都已经被作为正式版包使用了

npm install --save-dev @babel/plugin-transform-class-properties @babel/plugin-transform-nullish-coalescing-operator @babel/plugin-transform-optional-chaining @babel/plugin-transform-private-methods

node 16 和 chrome 106 版的 ES12 语法支持

通过在.babelrc 中配置预设环境，让 babel 按照 node 版本/Electron 版本/Chrome 版本来转义，因为上述版本都比较高，ES12 语法均已支持，所以 babel 基本上不会再进行转义，打包速度极快

{"comments": false,"env": {"main": {"presets": [["@babel/preset-env",{"modules": "commonjs","targets": {"node": "16"},"useBuiltIns": "usage","corejs": 3,"bugfixes": true}]]},"renderer": {"presets": [["@babel/preset-env",{"modules": false,"targets": {"electron": "22"},"useBuiltIns": "usage","corejs": 3,"bugfixes": true}]]},"preload": {"presets": [["@babel/preset-env",{"modules": false,"targets": {"electron": "22"},"useBuiltIns": "usage","corejs": 3,"bugfixes": true}]]},"web": {"presets": [["@babel/preset-env",{"modules": false,"targets": {"chrome": "106"},"useBuiltIns": "usage","corejs": 3,"bugfixes": true}]]}},"plugins": ["@babel/plugin-transform-runtime"]
}

babel 插件的分类

• @babel/plugin-proposal-... 插件：

  • 这些插件用于支持 ECMAScript 提案阶段的语法特性，即尚未正式成为 JavaScript 标准的功能。

  • 它们允许开发者在这些特性正式标准化前提前使用相关语法。

  • proposal 单词翻译为“提案”、“建议”、“方案”，类似于还没有完全采纳的意思

• @babel/plugin-transform-... 插件：

  • 这些插件用于转换已经被正式纳入 ECMAScript 标准的语法特性。

  • 它们确保这些标准特性在目标环境（如旧版浏览器或 Node.js）中能够正确运行。

  • Transform 意为“转变”、“转换”、“变形”

因为我们设定了 babel 的兼容 ES12，所以下面这些转化基本都用不到，因为 Chrome 能支持，所以也不需要这些插件，你可以直接用最新的语法，如?? 或 ?.

ES12的一些关键语法糖

1. 逻辑赋值运算符：

   • &&=
   • ||=
   • ??=

   这些运算符允许更简洁地对变量进行赋值操作。

2. 数字分隔符：

   • 使用下划线 _ 作为数字分隔符，提高数值的可读性，例如 1_000_000。

3. Promise.any：

   • 返回第一个成功的 Promise，若所有 Promise 都失败，则返回 AggregateError。

4. WeakRefs 和 FinalizationRegistry：

   • 提供对垃圾回收机制更精细的控制，允许在对象被垃圾回收时执行回调。

5. 模块命名空间导出：

   • 允许通过命名空间方式导出模块，提高模块化开发的灵活性。

6. String.prototype.replaceAll：

   • 提供更简便的方法来替换字符串中的所有匹配项，而无需使用正则表达式。

7. 私有类字段和方法的改进：

   • 增强了类的私有属性和方法的定义和使用方式。