如何在Netlify上同步node_modules中修改的webpack.config.js配置？

直接修改node_modules里的webpack.config.js根本行不通——这个目录在.gitignore里不会被提交到版本库，而且依赖更新时会被完全覆盖。针对你用react-scripts创建的项目，有两种可靠的解决办法：

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

这个方法不用暴露react-scripts的底层配置，直接在项目根目录添加自定义规则：

1. 安装依赖

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

2. 修改package.json的scripts
   把原来的react-scripts替换成react-app-rewired：

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

3. 创建自定义配置文件
   在项目根目录新建config-overrides.js，把你之前修改webpack.config.js的内容迁移到这里。比如你要调整某个loader或插件，示例写法如下：

   const { override, adjustStyleLoaders } = require('customize-cra');
   
   module.exports = override(
     // 示例：修改sass-loader的配置
     adjustStyleLoaders(rule => {
       if (rule.test.toString().includes('scss')) {
         rule.use.push({
           loader: 'sass-loader',
           options: {
             // 你的自定义配置项
           }
         });
       }
     })
   );
   

4. 提交文件
   将config-overrides.js和修改后的package.json提交到git，Netlify部署时会自动执行修改后的build命令，应用你的自定义Webpack配置。

方案二：eject暴露所有配置（不可逆） #

如果你需要完全掌控Webpack的所有配置，可以执行eject命令，但这个操作一旦执行就无法撤销：

1. 执行eject

   npm run eject
   

   执行后，项目根目录会生成config和scripts文件夹，里面包含完整的Webpack、Babel等配置文件。

2. 修改Webpack配置
   找到config/webpack.config.js，直接修改你需要调整的配置项。

3. 提交配置文件
   将config和scripts文件夹提交到git，Netlify部署时会使用这些自定义配置完成构建。

注意事项 #

• 永远不要修改node_modules里的文件，所有自定义配置都要放在项目根目录的版本控制文件中。
• 方案一的react-app-rewired能兼容大部分react-scripts的更新，而方案二eject后需要自己维护所有配置，后续react-scripts的更新无法直接应用。

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