如何向 Single Spa 添加网站图标？

Question

不管你信不信，我花了一些时间试图找到一种将网站图标添加到Single Spa应用程序的方法：)。我在框架文档中找不到任何内容。有一些关于静态资产的零碎信息，但它对我并没有多大帮助。我最终意识到这与 Webpack 配置有关。请参阅下面我的回答。

Answer 1

对于那些仍然在这里苦苦挣扎的人来说，这是我发现的最简单、最优雅的方法。HtmlWebpackPlugin通过提供 favicon 属性解决了这个问题。可以在此处找到文档。如果您使用 Sing Spa 5.x，HtmlWebpackPlugin 插件已经是一个依赖项。只需使用以下内容更新根配置应用程序 webpack.config.js 文件的参数即可。路径是相对于 webpack.config.js 目录。

new HtmlWebpackPlugin({
    favicon: "./[path-to-your-file]/favicon.ico"
})

然后在 index.ejs 文件头部分添加以下行。

<link rel="icon" type="image/x-icon" href="favicon.ico">

清除浏览器缓存，然后就可以开始了。