Question 1

如何修复在 Node.js 17 中使用 webpack 时出现的 "error:0308010C:digital envelope routines::unsupported" 错误？

Accepted Answer

此错误出现是因为旧版本的 webpack 使用 MD4 哈希算法，而该算法已被 Node.js 17 中的 OpenSSL 3 禁用。将 webpack 升级到 5.61.0 或更高版本：`npm install webpack@^5.61.0 --save-dev`，然后重新构建。作为临时解决方案，可以使用 Node.js 16（`nvm use 16`）或启用旧版 OpenSSL provider：在 Linux/macOS 上运行 `export NODE_OPTIONS=--openssl-legacy-provider`；在 Windows CMD 中运行 `set NODE_OPTIONS=--openssl-legacy-provider`；在 PowerShell 中运行 `$env:NODE_OPTIONS="--openssl-legacy-provider"`。然后再次运行构建。

Question 2

升级到 webpack 5.111.1 后,如何修复 Terser 报错 "DefaultsError: `as` is not a supported option"?

Accepted Answer

将 `minimizer-webpack-plugin` 升级到 5.12.0 或更高版本;该回归问题存在于 5.8.0 中。使用 Yarn 时,运行:

```bash
yarn up minimizer-webpack-plugin@^5.12.0
```

使用 npm 时:

```bash
npm install minimizer-webpack-plugin@^5.12.0 -D
```

然后重新安装依赖并重新构建。使用 `yarn why minimizer-webpack-plugin` 或 `npm ls minimizer-webpack-plugin` 验证实际解析的版本。从 5.8.0 升级到 5.12.0 可解决在压缩嵌入 HTML 中的 JavaScript 时向 Terser 传递无效 `as: 'script'` 选项的问题。

Question 3

为什么在 processErrors 钩子移除了所有错误之后，webpack 的 stats.hasErrors() 仍然返回 true？

Accepted Answer

这是 webpack 5 的一个 bug，在 webpack 5.111.1 中复现。`Stats.hasErrors()` 直接读取 `compilation.errors`，而 `stats.toJson().errors` 和 `getErrors()` 会应用 `compilation.hooks.processErrors` waterfall 钩子。因此，在 `processErrors` 中过滤错误会将其从输出中移除，但不会改变 `hasErrors()` 的结果。

修复方法是让 `hasErrors()` 经由 `getErrors()` 获取错误，与 `hasWarnings()` 保持一致：

```js
hasErrors() {
  return (
    this.compilation.getErrors().length > 0 ||
    this.compilation.children.some((child) => child.getStats().hasErrors())
  );
}
```

将 webpack 升级到包含 issue #22279 修复的版本。在此之前，当插件通过 `processErrors` 过滤错误时，不要依赖 `stats.hasErrors()`。请改用处理后的错误列表：

```js
function hasProcessedErrors(compilation) {
  return (
    compilation.getErrors().length > 0 ||
    compilation.children.some(hasProcessedErrors)
  );
}

const hasErrors = hasProcessedErrors(stats.compilation);
```

或者，可以通过 `stats.toJson().errors.length` 检查渲染后的 stats 输出；如果你的构建使用了子编译（child compilations），记得将其计算在内。

Question 4

为什么 webpack 的 browserslist 目标 `safari 10` 会将 `const`/`let` 报告为不受支持，而 `safari 10.0` 却报告它们受支持？

Accepted Answer

这是 webpack 的 `browserslistTargetHandler` 中的一个 bug（已在 webpack 5.111.1 和 `main` 分支中确认）。当某个 target 只有主版本号时，例如 `safari 10`，其缺失的次版本号会变为 `NaN`。在相同主版本号的检查中，`NaN >= 0` 的结果为 `false`，因此在 `[10, 0]` 才开始支持的特性会被错误地判定为不受支持。

修复方法：在比较之前，将缺失的次版本号视为 `0`：

```js
const parserMinor = Number(parser.minor ?? 0);

if (
  Number(parserMajor) === requiredVersion[0] &&
  parserMinor >= requiredVersion[1]
) {
  // 该特性受支持
}
```

在修复版本的 webpack 发布之前，请应用 webpack issue #22278 的上游补丁，或使用 `patch-package`。作为临时解决方案，请尽可能使用显式的次版本号，例如 `safari 10.0`，不过某些 Browserslist 查询可能会将其规范化回仅含主版本号的形式。

Question 5

如何修复在使用 CSS @import 和 experiments.css 时发生的 webpack 崩溃 "TypeError: Cannot read properties of null (reading 'userRequest')"？

Accepted Answer

这是 webpack 原生 CSS 模式（`experiments.css: true`）中的一个 bug。当某条 CSS 规则使用 `parser: { exportType: "style" }`，且 `@import "./ignored.css"` 的目标被忽略时（通过 `IgnorePlugin` 或 `resolve.alias: { "...": false }`），`moduleGraph.getModule(dep)` 会返回 null，导致 `CssGenerator._generateImportExpressions` 在读取 `depModule.userRequest` 时崩溃。修复方法：1) 将 webpack 升级到包含此修复的版本（针对 issue #22842 的 PR 添加了 null 检查）。2) 临时补丁：在 `node_modules/webpack/lib/css/CssGenerator.js` 中，在 `_generateImportExpressions` 内部，紧接 `const depModule = moduleGraph.getModule(dep);` 之后添加 `if (!depModule) continue;`（可使用 `patch-package` 来持久化该补丁）。3) 替代变通方案：不再忽略该 CSS 文件——移除针对该样式表的 `IgnorePlugin`/`resolve.alias: false` 条目，或者在可行的情况下将该规则切换为 `exportType: "css-style-sheet"` / `"link"`，因为该崩溃仅在 `exportType: "style"` 时发生。

webpack

项目简介

README 预览

常见问题 (5)

同类型项目

hermes-agent

firecrawl

go

markitdown