本文探讨如何在React项目中使用 webpack 动态添加 favicon 图标。
如果你想要动态地在 html 中 添加 favicon 图标,建议使用 html-wepack-plugin 插件,使用一个模板html文件,通过webpack配置文件可以动态引入favicon图标,生成一个新的带有 favicon 的 html 文件。
npm install html-webpack-plugin --save-dev
//... 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文件路径 }), ] }