如何在Webpack v5中配置polyfill以在React项目中使用fs模块？

DevOps 小满

2026-8-22

解决Webpack编译时"process: module not found"错误

核心配置修正步骤

你已经搞定了util、constants、os的polyfill编译问题，但process模块的报错大概率是配置路径不对或缺少专属依赖，按以下方式调整：

安装process专属polyfill包：直接安装官方兼容包，不要仅靠其他模块的polyfill覆盖：
```
npm install process --save
# 或使用yarn
yarn add process
```

修正webpack resolve.alias配置：确保指向process的浏览器兼容入口，而非直接写"process"：

module.exports = {
  // ...其他webpack配置
  resolve: {
    alias: {
      // 关键：指向process包的浏览器环境入口文件
      process: 'process/browser'
    }
  }
}

进阶优化：自动注入+全局变量补全

如果代码里直接用到process.env这类全局变量，还需要配合Webpack内置插件补全：

用ProvidePlugin自动注入process：无需手动在每个模块import，让Webpack自动引入：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser'
    })
  ]
}

用DefinePlugin补全process.env变量：如果代码依赖process.env.NODE_ENV这类环境变量，显式定义避免报错：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      // 也可以直接同步所有环境变量
      'process.env': JSON.stringify(process.env)
    })
  ]
}