reactjs - 网络清单：行：1，列：1，语法错误

Question

我有反应 + webpack 应用程序

我的 manifest.webmanifest

{
  "name": "x",
  "short_name": "x",
  "start_url": "./index.html",
  "display": "fullscreen",
  "background_color": "white",
  "theme_color": "white",
  "icons": [
    {
      "src": "favicon-16x16.png",
      "type": "image/png",
      "sizes": "16x16"
    },
    {
      "src": "favicon-32x32.png",
      "type": "image/png",
      "sizes": "32x32"
    }
  ]
}

索引.html

<link crossorigin="use-credentials" rel="manifest" href="manifest.webmanifest" />

我尝试了不同的组合，但总是在 Chorome 中出错（在本地主机上）：

行：1，列：1，语法错误；

1. manifest.webmanifest 应该在哪个文件夹中？(src, public, public/img ????) index.html 在 src 文件夹中

2. 在 index.html 的 href 中写什么？(href="manifest.webmanifest", href="./manifest.webmanifest" ???)

3. 在 manifest.webmanifest 的“start_url”中写什么？

4. 在哪里存储 favicon-16x16.png 和 favicon-32x32.png (src, public ???)

5. 在 manifest.webmanifest 的图标 src 中写什么

"icons": [
    {
      "src": ?????????,
      "type": "image/png",
      "sizes": "16x16"
    },

6. 我需要在 Webpack 的设置中写一些额外的东西吗？

Answer 1

我找到了答案！））

问题是 Webpack 在结果包中不包含 manifest.webmanifest 和 icons img。我们需要手动完成，在 Webpack 配置中编写必要的路径：

添加const CopyWebpackPlugin = require('copy-webpack-plugin'); 在 webpack.config.js

...
plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/manifest.webmanifest'),
          to: path.resolve(__dirname, 'build'),
        },
        {
          from: path.resolve(__dirname, 'public/img/icons/'),
          to: path.resolve(__dirname, 'build/icons/'),
        },
      ],
    }),
...

现在所有图像和 manifest.webmanifest 都在结果构建文件夹中！