Question

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

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

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

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.html片段：

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

我在做什么错了？

Answer 1

您可以执行以下操作来加载manifest.json：

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

要知道文件是否已加载，请在Application => Manifest内检入Chrome DevTools

Answer 2

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

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

2 个答案: