您好,感谢您阅读本文。
因此,我想使用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看到我的仓库