webpack - manifest.json 未找到

Question

我正在使用React进行网站开发。
运行应用程序时出现错误。

我检查了 Inspector 中的Sources ，有一个 manifest.json 但显示错误。

文件夹结构：

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

webpack/webpack.base.js

const webpack = require("webpack");

const utils = require("./utils");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx",
  resolve: {
    alias: {
      "@": utils.resolve("src")
    },
    extensions: ["*", ".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 8192
          }
        }
      },
      {
        test: /\.(ico|json)$/,
        exclude: /node_modules/,
        use: ["file-loader?name=[name].[ext]"] // ?name=[name].[ext] is only necessary to preserve the original file name
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
      inject: true,
      favicon: "public/favicon.ico",
      manifest: "public/manifest.json",
    })
  ]
};

webpack/webpack.dev.js

const { merge } = require("webpack-merge");
const base = require("./webpack.base");

const Dotenv = require("dotenv-webpack");

module.exports = merge(base, {
  mode: "development",
  devtool: "inline-source-map",
  output: {
    publicPath: "/"
  },
  devServer: {
    port: 3030,
    static: true,
    static: "dist"
  },
  plugins: [new Dotenv({ path: "./.env.development" })]
});

webpack/utils.js

const path = require("path");

module.exports = {
  resolve: function (dir) {
    return path.join(__dirname, "..", dir);
  }
};

Answer 1

根据您的文件结构和 webpack 配置，您的清单位于未引用的public/目录中。 https://webpack.js.org/configuration/dev-server/#directory

您可能希望将您的配置更改为：

  devServer: {
    port: 3030,
    static: [
      { directory: utils.resolve("dist") },
      { directory: utils.resolve("public") },
    ]
  },

FWIW，webpack/utils.js 文件似乎是多余的—— Path.resolve()正是这样做的。

webpack - manifest.json 未找到

问题描述

1 个解决方案

解决方案1
0 2021-12-01 04:10:28

webpack - manifest.json 未找到

问题描述

1 个解决方案

解决方案1 0 2021-12-01 04:10:28

解决方案1
0 2021-12-01 04:10:28