React.js中如何修改index.html文件的引用路径？

自行搭建、未使用create-react-app的前端项目，默认检索public目录下index.html的逻辑基本来自构建工具的对应配置，按你使用的构建工具调整对应配置即可，最常见的Webpack场景操作如下：

• 打开项目根目录下的Webpack配置文件，通常命名为webpack.config.js、webpack.common.js或拆分在build/config目录下
• 在配置项的plugins数组中，找到HtmlWebpackPlugin的实例配置段——自动检索public/index.html的逻辑就是这个插件的默认规则
• 修改配置中的template字段，填入你自定义存放的index.html的路径即可，配置示例：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其余entry、output、loader等配置保持原有内容不变
  plugins: [
    new HtmlWebpackPlugin({
      // 默认配置一般为 path.resolve(__dirname, 'public/index.html')
      // 替换为你的目标路径即可，例如存放在src/main目录下就按如下写法
      template: path.resolve(__dirname, 'src/main/index.html'),
      // filename、inject、minify等其余原有配置项无需改动
    })
  ]
}

• 如果你没有使用html-webpack-plugin，是自行封装开发服务（比如基于express、koa手写的本地服务）实现的html返回逻辑，直接找到服务中响应根路由、读取html文件返回的代码段，把fs读取文件的路径替换为新的index.html存放路径即可。

修改配置后需要重启本地开发服务/重新执行构建命令，新的路径规则才会生效。

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