React 中使用 webpack 动态添加 favicon 图标

Z时代
2024-01-10
分类：综合

react

本文探讨如何在React项目中使用 webpack 动态添加 favicon 图标。

如果你想要动态地在 html 中添加 favicon 图标，建议使用 html-wepack-plugin 插件，使用一个模板html文件，通过webpack配置文件可以动态引入favicon图标，生成一个新的带有 favicon 的 html 文件。

安装 html-wepack-plugin：

npm install html-webpack-plugin --save-dev

创建一个html模板文件，不用手动引入 favicon.ico：

webpack.config.js 中配置 html-wepack-plugin：

//...
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: "./app/index.js",
        login: "./app/login.js",
        vendor: [
            'react',
            'react-dom',
            'react-router-dom',
            'antd'
        ]
    },
    //...
    plugins: [
        //...
        new HtmlWebpackPlugin({
            filename: "./../html/index.html", //编译后生成新的html文件路径
            template: './app/templateHtml/index.html', //原html模板文件路径
            thunks: ['vendor', 'index'],  // 需要引入的入口文件
            excludeChunks: ['login'],  // 不需要引入的入口文件
            favicon: './app/images/favicon.ico' //favicon.ico文件路径
        }),
    ]}