Webpack 5升级后出现Uncaught ReferenceError: Buffer is not defined错误求助

解决步骤： #

• 安装buffer polyfill包
  Webpack 5不再自动注入Node.js核心模块，需要手动安装对应的polyfill：

  npm install buffer --save
  

• 修正Webpack配置
  在webpack.config.js中更新以下配置项，确保正确注入Buffer并指定fallback：

  const webpack = require('webpack');
  
  module.exports = {
    // 保留你原有的其他配置（entry、output等）
    plugins: [
      // 自动在全局注入Buffer
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
      // 其他已有的插件...
    ],
    resolve: {
      fallback: {
        // 将buffer指向安装的polyfill包
        "buffer": require.resolve("buffer"),
        // 如果后续遇到其他Node.js核心模块缺失，可在此添加对应配置，比如"stream": require.resolve("stream-browserify")
      },
    },
    module: {
      rules: [
        // 处理部分ESM包的导入兼容性问题
        {
          test: /\.m?js$/,
          resolve: {
            fullySpecified: false,
          },
        },
      ],
    },
  };
  

• 清理缓存并重新构建
  避免缓存导致的配置不生效：

  rm -rf node_modules/.cache
  npm run build # 或你的开发启动命令，比如npm start
  

为什么之前的方法无效： #

• 设置"buffer": false是让Webpack忽略该模块，自然会导致restructure找不到Buffer；
• 修改node_modules内的文件不可持续，执行npm install后会被覆盖；
• 之前的ProvidePlugin配置错误，没有正确指定Buffer的导出路径，导致触发assets相关错误。

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