javascript - 将 html-webpack-plugin 和 favicons-webpack-plugin 与 craco 一起使用，但不适用于 index.html

Question

您好，感谢您阅读本文。

因此，我想使用html-webpack-plugin和favicons- webpack-plugin 的组合将 favicons的清单和不同分辨率注入我的应用程序。

我正在尝试使用此配置

/* craco.config.js */
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");

module.exports = {
  babel: {
    plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
  },
  webpack: {
    plugins: [
      new HtmlWebpackPlugin({
        title: "My App",
        template: "./public/index.html",
        filename: "admin.html",
        meta: {
          viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
          // Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          "theme-color": "#4285f4",
          // Will generate: <meta name="theme-color" content="#4285f4">
        },
      }),
      new HtmlWebpackPlugin({
        title: "My App",
        template: "./public/index.html",
        filename: "admin2.html",
        meta: {
          viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
          // Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          "theme-color": "#4285f4",
          // Will generate: <meta name="theme-color" content="#4285f4">
        },
      }),
      new HtmlWebpackPlugin({
        title: "My App",
        template: "./public/index.html",
        filename: "index.html",
        meta: {
          viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
          // Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          "theme-color": "#4285f4",
          // Will generate: <meta name="theme-color" content="#4285f4">
        },
      }),
      new FaviconsWebpackPlugin({
        logo: "./src/logo.svg", // svg works too!
        prefix: "icons/",
        inject: true,
        favicons: {
          appName: "my-app",
          appDescription: "My awesome App",
          developerName: "Me",
          developerURL: null, // prevent retrieving from the nearest package.json
          background: "#ddd",
          theme_color: "#333",
          icons: {
            coast: false,
            yandex: false,
          },
        },
      }),
    ],
  },
};

并且测试导致了奇怪的意外结果。在文档 admin 和 admin2 中，结果是预期的，但在索引上，似乎我的插件被覆盖了。

我不确定我是否做错了，这是我第一次使用craco。非常感谢你提前

你可以在https://github.com/GunB/PageGroup-Test-0520/tree/1-Layout看到我的仓库

标签： javascriptwebpackcreate-react-apphtml-webpack-plugincraco