如何在React构建中移除manifest.json的请求与生成？

由于你无法手动修改构建后的index.html，需要在构建阶段直接阻止manifest.json的生成和页面对它的请求，以下是几种可行方案：

方案一：使用react-app-rewired自定义webpack配置（无需eject） #

这是无需eject项目的推荐方案，通过覆写默认webpack配置实现需求：

• 安装依赖：

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

• 在项目根目录创建config-overrides.js文件，添加以下代码：

module.exports = function override(config, env) {
  // 移除ManifestPlugin，阻止manifest.json文件生成
  config.plugins = config.plugins.filter(plugin => {
    return plugin.constructor.name !== 'ManifestPlugin';
  });

  // 移除HTMLWebpackPlugin中对manifest的引用，避免index.html里出现相关请求
  config.plugins.forEach(plugin => {
    if (plugin.constructor.name === 'HtmlWebpackPlugin') {
      delete plugin.options.manifest;
    }
  });

  return config;
};

• 修改package.json中的scripts命令，替换原react-scripts为react-app-rewired：

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

方案二：使用craco修改配置（无需eject） #

craco也是create-react-app的常用配置覆写工具，步骤如下：

• 安装依赖：

npm install @craco/craco --save-dev

• 在项目根目录创建craco.config.js文件：

module.exports = {
  webpack: {
    configure: (config) => {
      // 移除ManifestPlugin
      config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'ManifestPlugin');
      // 移除HTMLWebpackPlugin的manifest引用
      config.plugins.forEach(plugin => {
        if (plugin.constructor.name === 'HtmlWebpackPlugin') {
          delete plugin.options.manifest;
        }
      });
      return config;
    },
  },
};

• 修改package.json的scripts：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

方案三：已eject项目的处理（不推荐，不可逆） #

如果已经执行过npm run eject，可以直接修改webpack配置文件：

• 打开config/webpack.config.js，找到new ManifestPlugin(...)的代码块，注释或删除该插件实例
• 找到HtmlWebpackPlugin的配置项，删除其中的manifest: paths.appManifest这一行

以上方案执行后，运行npm run build时将不会生成manifest.json文件，同时index.html中也不会出现对该文件的请求，从根源解决CORS问题。

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