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

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

javascript html reactjs webpack

Javascript 如何在React JS应用程序中加载manifest.json,javascript,html,reactjs,webpack,Javascript,Html,Reactjs,Webpack,我有一个带有Webpack（而不是CRA）的React应用程序设置。我正试图通过添加一个与index.html并行的manifest.json文件使其渐进。运行应用程序时，我发现以下错误 GET http://localhost:8090/manifest.json 404 (Not Found) 另外，如果在运行build命令后查看dist文件夹，则没有manifest.json文件复制到dist。我试过使用网页包的文件加载程序插件，但也不起作用。下面是webpack.config.js代码

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

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

另外，如果在运行

build

命令后查看

dist

文件夹，则没有

manifest.json

文件复制到

dist

。我试过使用网页包的

文件加载程序

插件，但也不起作用。下面是

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: './' } } }
    ]
},

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

下面是

index.html

代码段：

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: './' } } }
    ]
},

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

我做错了什么？

加载清单的方法。json包括以下步骤：

将
```
manifest.json
```
放在项目根目录下的
```
static
```
文件夹中
在您的
```
index.html
```
：

要知道您的文件是否已加载，请检查Chrome DevTools的内部应用程序=>Manifest

您可以执行哪些操作来加载

Manifest.json

如下步骤：

将
```
manifest.json
```
放在项目根目录下的
```
static
```
文件夹中
在您的
```
index.html
```
：

要知道您的文件是否已加载，请检查Chrome DevTools，inside Application=>Manifest

如果上面的答案不适用于您（如我的情况），请尝试应用程序Manifest网页包插件
当您运行
npm run build
或
warn run build
时，它会为您构建manifest.json文件

它还有许多配置，使其非常灵活。
如果上面的答案对您不起作用（就像我的情况），请尝试应用程序清单网页包插件
当您运行
npm run build
或
warn run build
时，它会为您构建manifest.json文件
它还有许多配置，因此非常灵活