Angular 5下Favicons Webpack Plugin注入范围异常求助

这个问题我之前也踩过坑，插件不分类型把favicon的HTML代码插到JS、图片甚至字体文件里，直接导致应用崩溃。别担心，调整插件配置就能精准控制注入范围，只让它对index.html生效。

核心解决方案：限制插件的注入目标 #

angular2-favicons-webpackPlugin（底层基于favicons-webpack-plugin）提供了专门的配置项来约束注入范围，你只需要在插件初始化时添加对应配置即可：

方法1：用files选项明确指定目标文件

修改Webpack配置中插件的实例化代码，添加files数组，仅包含index.html：

const Angular2FaviconsWebpackPlugin = require('angular2-favicons-webpack-plugin');

// ... 其他配置代码
plugins: [
  // ... 已有插件（比如CopyWebpackPlugin等）
  new Angular2FaviconsWebpackPlugin({
    logo: './src/assets/your-favicon.png', // 替换成你的favicon路径
    // 关键配置：仅向index.html注入
    files: [
      {
        filename: 'index.html',
        inject: true
      }
    ],
    // 按需添加其他favicon配置（比如尺寸、格式）
    icons: {
      android: true,
      appleIcon: true,
      // ... 其他平台配置
    }
  })
]

方法2：关联到处理index.html的HtmlWebpackPlugin实例

ng CLI生成的配置默认会用HtmlWebpackPlugin处理index.html，你可以直接把插件和这个实例绑定，确保只注入到该文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const Angular2FaviconsWebpackPlugin = require('angular2-favicons-webpack-plugin');

// 先实例化处理index.html的HtmlWebpackPlugin
const indexHtmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: true,
  // 其他HtmlWebpackPlugin配置
});

module.exports = {
  // ... 其他配置
  plugins: [
    indexHtmlPlugin,
    // ... 已有插件
    new Angular2FaviconsWebpackPlugin({
      logo: './src/assets/your-favicon.png',
      // 关键：绑定到指定的HtmlWebpackPlugin实例
      htmlPlugin: indexHtmlPlugin,
      // 其他favicon配置
    })
  ]
};

问题根源说明 #

默认情况下，这个插件会遍历Webpack输出的所有资源文件，尝试向每个文件注入favicon相关代码——这显然不符合我们的需求。通过上述配置，我们明确告诉插件：只对index.html执行注入操作，其他文件一概跳过。

额外提示 #

• 确保插件版本和你的Angular 5.x、Webpack 3.x环境兼容，避免版本不匹配导致配置失效；
• 如果是ng CLI生成的默认配置，你可能需要通过ng eject导出完整Webpack配置（或使用自定义Webpack构建工具）来修改插件配置。

内容的提问来源于stack exchange，提问作者ninja