我有一个使用 Webpack（而不是 CRA）设置的 React 应用程序。我试图通过添加与index.html 并行的manifest.json 文件来使其渐进。运行应用程序时，我遇到以下错误。
GET http://localhost:8090/manifest.json 404 (Not Found)
此外，如果我在运行
distbuildmanifest.jsondistfile-loaderwebpack.config.jsmodule: {
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>
我做错了什么？
您可以执行以下步骤来加载
manifest.jsonmanifest.jsonstaticindex.html<link rel="manifest" href="/manifest.json">要了解您的文件是否已加载，请检查 Chrome DevTools，在 Application => Manifest 中
如果上面的答案不适合您（就像我的情况一样），请尝试 app-manifest-webpack-plugin。
当您运行 npm run build 或
yarn run buildmanifest.json文件。
尝试使用此插件自动生成清单文件。 插件：webpack-pwa-manifest
示例代码：
const WebpackPwaManifest = require('webpack-pwa-manifest');
new WebpackPwaManifest({
name: 'My App',
short_name: 'App',
description: 'My awesome app',
background_color: '#ffffff',
theme_color: '#000000',
publicPath: '/',
icons: [
{
src: path.resolve('web/public/logo192.png'),
sizes: [ 192],
},
],
}),
注意:: publicPath: '/', 非常重要。这解决了我的 404 问题。
这是演示清单文件，将生成并存储在您的目标文件夹中，其中按照您的 webpack 配置文件存储 index.html。
记得使用
新的 HtmlWebpackPlugin({
模板：path.resolve(appDirectory, 'web/public/index.html'),
注入：真实，
}),
这将直接加载您的清单文件到index.html文件中。