如何在 React JS 应用程序中加载 manifest.json答案

【问题标题】：How to load manifest.json in React JS app如何在 React JS 应用程序中加载 manifest.json
【发布时间】：2020-03-30 02:40:45
【问题描述】：

我有一个使用 Webpack（而不是 CRA）的 React 应用程序设置。我试图通过添加与 index.html 并行的 manifest.json 文件来使其渐进。运行应用程序时出现以下错误。

GET http://localhost:8090/manifest.json 404 (Not Found)

另外，如果我在运行build 命令后查看dist 文件夹，则没有manifest.json 文件复制到dist。我曾尝试使用 webpack 的 file-loader 插件，但它也不起作用。下面是webpack.config.jssn-p：

module: {
    rules: [
        { test: /\.(js)$/, exclude: /node_modules/, use: 'babel-loader' },
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        //{ test: /\.html$/, use: ['html-loader'] },
        { test: /\.(svg|png|jpg|jpeg|gif)$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'assets/img' } } },
        { test: /\.(json)$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './' } } }
    ]
},

下面是index.htmlsn-p：

<head>
   <link rel="manifest" href="./manifest.json" />
</head>

我做错了什么？

【问题讨论】：

标签： javascript html reactjs webpack

【解决方案1】：

您可以通过以下步骤加载manifest.json：

将manifest.json 放在项目根目录下的static 文件夹中。
在您的index.html 中：<link rel="manifest" href="/manifest.json">

要了解您的文件是否已加载，请在 Chrome DevTools 中的 Application => Manifest 中检查

【讨论】：

【解决方案2】：

如果上面的答案对您不起作用（例如我的情况），请尝试 app-manifest-webpack-plugin。
当您运行 npm run build 或 yarn run build 时，它会为您构建 manifest.json 文件。
它还具有多种配置，使其非常灵活。

【讨论】：