WADesk 升级 Webpack5 一些技术细节认识5和4的区别在哪里-优快云博客

本文链接：https://blog.youkuaiyun.com/wangsenling/article/details/144412241

背景

升级过程中发现有很多新的知识点，虽然未来可能永远都不会再遇到，但是仍然是一次学习的好机会，可以让自己知道，打包软件的进化之路，和原来 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 意为“转变”、“转换”、“变形”