webpack 5缺失polyfill报错，已安装相关依赖仍无法解决

问题背景 #

Webpack 5 移除了对 Node.js 核心模块的默认 polyfill 支持，Angular 项目使用该版本后，若依赖了需要 Node 核心模块的包，会触发「模块未找到 - polyfill」报错。即便安装了对应的 browserify 类 polyfill 包，未配置 Webpack 回退规则仍会报错。

解决步骤 #

1. 安装自定义 Webpack 构建器

Angular 默认构建器不支持自定义 Webpack 配置，需先安装适配的构建器：

npm install --save-dev @angular-builders/custom-webpack

2. 创建自定义 Webpack 配置文件

在项目根目录新建 webpack.config.js，添加如下配置，指定 Node 核心模块的 polyfill 回退路径，并注入全局变量：

module.exports = {
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "assert": require.resolve("assert"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "os": require.resolve("os-browserify"),
      "url": require.resolve("url"),
      "buffer": require.resolve("buffer"),
      "process": require.resolve("process/browser")
    }
  },
  plugins: [
    new require('webpack').ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

3. 修改 Angular 项目配置

打开 angular.json，找到项目对应的构建和服务配置，修改如下：

• 构建配置：
  将 projects.[你的项目名].architect.build.builder 替换为：

  "@angular-builders/custom-webpack:browser"
  

  在 build.options 中添加自定义 Webpack 配置：

  "customWebpackConfig": {
    "path": "./webpack.config.js",
    "mergeStrategies": {
      "resolve.fallback": "replace"
    }
  }
  

• 开发服务配置：
  将 projects.[你的项目名].architect.serve.builder 替换为：

  "@angular-builders/custom-webpack:dev-server"
  

  在 serve.options 中添加同样的 customWebpackConfig 配置。

4. （可选）补充全局 Polyfill 注入

若部分依赖仍无法识别全局变量，在 src/polyfills.ts 中添加：

import 'process';
import 'buffer';

关键说明 #

你已安装的所有 browserify 类包是正确的，但 Webpack 5 不会自动关联这些包与 Node 核心模块，必须通过 resolve.fallback 明确映射路径，同时通过 ProvidePlugin 注入 process、Buffer 等全局变量，才能彻底解决模块未找到的问题。

内容的提问来源于stack exchange，提问作者Helna Anto