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

Question

I have a React app setup with Webpack(and not CRA).我有一个带有 Webpack（而不是 CRA）的 React 应用程序设置。 I am trying to make it progressive by adding a manifest.json file parallel to index.html.我试图通过添加一个与 index.html 并行的 manifest.json 文件来使其渐进式。 While running the app I am getting below error.在运行应用程序时，我遇到以下错误。

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

Also, if I look at the dist folder after running the build command, there is no manifest.json file copied to dist .此外，如果我在运行build命令后查看dist文件夹，则没有manifest.json文件复制到dist 。 I have tried using the webpack's file-loader plugin, but it also doesn't work.我曾尝试使用 webpack 的file-loader插件，但它也不起作用。 Below is the webpack.config.js snippet:下面是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: './' } } }
    ]
},

Below is index.html snippet:下面是index.html片段：

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

What am I doing wrong?我究竟做错了什么？

Answer 1

What you can do to load manifest.json are following steps:您可以执行以下步骤来加载manifest.json ：

put the manifest.json in the static folder at the root of your project.将manifest.json放在项目根目录的static文件夹中。
in your index.html : <link rel="manifest" href="/manifest.json">在你的index.html ： <link rel="manifest" href="/manifest.json">

To know if your file was load, check in Chrome DevTools, inside Application => Manifest要知道您的文件是否已加载，请检查 Chrome DevTools，在 Application => Manifest

Answer 2

If the answer above doesn't work for you (like in my case), try the app-manifest-webpack-plugin .如果上面的答案对您不起作用（就像我的情况一样），请尝试app-manifest-webpack-plugin 。
It builds out the manifest.json file for you when you run npm run build or yarn run build .当您运行npm run build或yarn run build时，它会为您构建manifest.json文件。
It also has numerous configurations, making it very flexible.它还具有多种配置，使其非常灵活。

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

问题描述

2 个解决方案

解决方案1
3 2019-12-05 08:28:13

解决方案2
1 2020-10-17 09:04:14

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

问题描述

2 个解决方案

解决方案1 3 2019-12-05 08:28:13

解决方案2 1 2020-10-17 09:04:14

解决方案1
3 2019-12-05 08:28:13

解决方案2
1 2020-10-17 09:04:14