如何在 React JS 應用程序中加載 manifest.json

Question

我有一個帶有 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.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">

要知道您的文件是否已加載，請檢查 Chrome DevTools，在 Application => Manifest

Answer 2

如果上面的答案對您不起作用（就像我的情況一樣），請嘗試app-manifest-webpack-plugin 。
當您運行npm run build或yarn run build時，它會為您構建manifest.json文件。
它還具有多種配置，使其非常靈活。

如何在 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