如何让Create React App的public子文件夹实现自动加载？

问题原因 #

Create React App（CRA）默认开发服务器仅监听public根目录下的文件变化，public子文件夹内的文件修改不会自动触发热重载或服务器刷新——这是因为CRA的默认webpack/devServer配置未将子文件夹纳入自动监听范围。

解决方法 #

1. 临时方案：手动重启开发服务器

修改public子文件夹内的文件后，停止当前npm start进程，重新运行npm start。开发服务器会重新扫描整个public目录（含所有子文件夹），新修改的文件即可正常加载。

2. 永久方案：修改webpack配置（两种方式）

方式一：eject暴露配置

• 执行npm run eject（此操作不可逆，会将CRA的隐藏配置全部暴露）
• 找到项目根目录下的config/webpackDevServer.config.js文件
• 调整watchOptions中的ignored规则，确保public子文件夹不被忽略，示例代码如下：

watchOptions: {
  ignored: [
    'node_modules/**',
    '!public/subfolder/**' // 取消对子文件夹的忽略
  ]
}

• 确认watchContentBase已设为true、contentBase指向paths.appPublic（默认已配置），保证devServer监听整个public目录的内容变化。

方式二：用react-app-rewired自定义配置（无需eject）

• 安装依赖：npm install react-app-rewired customize-cra --save-dev
• 在项目根目录创建config-overrides.js文件，添加以下内容：

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

module.exports = override(
  devServer(config => {
    config.watchContentBase = true;
    config.contentBase = './public';
    config.watchOptions = {
      ...config.watchOptions,
      ignored: [
        'node_modules/**',
        '!public/subfolder/**'
      ]
    };
    return config;
  })
);

• 修改package.json中的启动脚本：

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

• 重新运行npm start，此时public子文件夹内的文件修改会自动触发服务器刷新。

官方文档相关说明 #

CRA的官方设计中，public目录主要用于放置应用入口index.html、favicon、无法通过webpack处理的静态资源等，官方更推荐将需要热重载的静态资源放在src目录下，通过import引入（webpack会自动处理这类资源并支持热重载）。官方文档未明确支持public子文件夹的自动热重载场景，因此需要通过自定义配置实现需求。

内容的提问来源于stack exchange，提问作者Weijing Jay Lin