logo标签列表

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

javascripthtmlreactjswebpack
3

我有一个使用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>

我做错了什么？
2个回答
4
以下是需要翻译的内容：

你可以按照以下步骤来加载manifest.json：

  • 将manifest.json文件放在项目根目录下的static文件夹中。
  • 在index.html中添加以下代码：<link rel="manifest" href="/manifest.json">

要确定文件是否已加载，请在Chrome DevTools中查看Application => Manifest

1
如果上面的答案对你没有用（就像在我的情况下一样），请尝试app-manifest-webpack-plugin。
当你运行npm run build或yarn run build时，它会为你构建manifest.json文件。
它还有许多配置，使它非常灵活。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接