需修改哪个webpack.config.js文件以配置fallbacks？

首先明确：你不需要修改node_modules目录下任何webpack.config.js——包括react-scripts里的那个。直接改依赖里的文件不仅会在下次npm install时被覆盖，对create-react-app项目来说更是完全不生效。

为什么改react-scripts里的配置没用？ #

create-react-app是封装好的脚手架，它在构建时会加载自身内置的webpack配置逻辑，你手动修改node_modules/react-scripts里的文件，根本不会被脚手架识别，等于白改。

正确的解决路径 #

针对你的create-react-app项目，有两种可行方案：

方案1：用react-app-rewired覆盖配置（推荐，无需eject） #

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录新建config-overrides.js文件，写入需要的polyfill fallback配置，比如：

const { override, addWebpackConfig } = require('customize-cra');

module.exports = override(
  addWebpackConfig({
    resolve: {
      fallback: {
        // 这里填你需要的polyfill，示例：
        "buffer": require.resolve("buffer/"),
        "crypto": require.resolve("crypto-browserify")
      }
    }
  })
);

3. 修改package.json里的scripts命令，把react-scripts替换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

方案2：eject暴露配置（不可逆） #

如果不想用第三方工具，执行命令暴露配置：

npm run eject

执行后，项目根目录会生成config/webpack.config.js，这个是属于你项目自己的配置文件，直接修改它的resolve.fallback即可，后续构建会读取这个文件，不会被依赖更新覆盖。

如何判断哪个webpack.config.js是项目生效的？ #

• 自定义webpack项目：项目根目录下的webpack.config.js（或带环境后缀的webpack.config.*.js）就是生效的，node_modules里的都是依赖自己的构建配置，和你的项目无关。
• create-react-app未eject状态：没有项目级的webpack配置文件，实际生效的是react-scripts内置的配置，但不能直接修改，必须用rewire或eject的方式覆盖。
• node_modules里的其他webpack.config.js：都是各个依赖包自己用来构建自身代码的配置，完全不需要碰。

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