Webpack 5多目标构建（Node.js+浏览器）下Uncaught ReferenceError: Buffer is not defined报错求助

我之前在做Node.js + TypeScript + Webpack多目标构建时，也踩过同样的Buffer全局未定义的坑，尤其是用到rfc6979、bip32这类密码学依赖的时候。你之前配置的fallback和alias只是让Webpack能找到对应的polyfill模块，但没有把Buffer注入到全局环境，这就是报错的核心原因。下面给你一套能解决问题的完整方案：

1. 先安装必要的polyfill依赖 #

首先确保把需要的核心模块polyfill都装上：

npm install buffer stream-browserify process

2. 完善Webpack配置 #

除了已有的fallback和alias，还要用Webpack的ProvidePlugin把Buffer和process注入到全局，同时调整node相关配置：

const webpack = require('webpack');

module.exports = {
  // 你的基础配置：entry、output、module rules等
  resolve: {
    fallback: {
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/"),
      "process": require.resolve("process/browser")
    },
    alias: {
      "buffer": "buffer",
      "stream": "stream-browserify"
    }
  },
  plugins: [
    // 关键：把Buffer和process注入到全局，让依赖能直接访问
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  ],
  // 多目标构建的target设置，如果需要同时兼容web和node
  target: ['web', 'node'],
  // 让Webpack保留Node.js环境的全局变量
  node: {
    global: true,
    __filename: true,
    __dirname: true
  }
};

3. 调整TypeScript配置（关键） #

因为你用了TypeScript，要确保TS能识别Buffer这些Node.js类型，修改tsconfig.json：

{
  "compilerOptions": {
    "lib": ["es2017", "dom"], // 包含dom环境和ES2017+语法
    "types": ["node"], // 引入Node.js类型定义
    "target": "es2017",
    "module": "commonjs",
    "esModuleInterop": true, // 避免模块导入的兼容问题
    "skipLibCheck": true // 跳过第三方库的类型检查，加快构建
  }
}

4. 多目标构建的进阶优化（可选） #

如果你的浏览器和Node.js版本的代码差异较大，建议拆分Webpack配置，用webpack-merge来管理：

• 创建webpack.config.browser.js，设置target: 'web'
• 创建webpack.config.node.js，设置target: 'node'，并且可以关闭polyfill相关配置（因为Node.js本身支持Buffer）
• 在package.json里添加构建脚本：

{
  "scripts": {
    "build:browser": "webpack --config webpack.config.browser.js",
    "build:node": "webpack --config webpack.config.node.js"
  }
}

为什么之前的配置无效？ #

Webpack 5彻底移除了默认的Node.js核心模块polyfill，所以只配置fallback和alias，只是让Webpack在解析模块时能找到对应的替代包，但那些依赖（比如rfc6979.js）是直接访问全局的Buffer，而不是通过import Buffer from 'buffer'引入的，所以必须用ProvidePlugin把Buffer挂载到全局环境中，才能让这些旧代码正常运行。

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