能否通过Webpack将favicon的href替换为内嵌base64格式？

Webpack v4 实现favicon base64内嵌方案 #

方案1：html-webpack-plugin + 内联插件组合（适配已有html-webpack-plugin构建流程） #

webpack4 环境下指定兼容版本安装依赖：

npm install html-webpack-plugin@4 html-webpack-inline-source-plugin@1.0.0-beta.2 --save-dev

webpack.config.js 配置示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 你的入口HTML模板路径
      favicon: './src/assets/favicon.png', // favicon本地路径
      inlineSource: '.(png|ico)$' // 匹配favicon后缀强制内联
    }),
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)
  ]
}

插件会自动注入favicon标签并转成base64内嵌到HTML中，符合单文件输出要求。

方案2：html-loader + url-loader 组合（适配手动写link标签的场景） #

如果你的<link rel="icon">是直接写在HTML模板中，用这套配置直接解析HTML内的资源引用：
安装兼容版本依赖：

npm install html-loader@1 url-loader@2 --save-dev

webpack.config.js 配置示例：

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              attributes: {
                list: [
                  // 配置解析link标签的href属性
                  { tag: 'link', attribute: 'href', type: 'src' }
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.(png|ico)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 102400, // 阈值设置大于favicon体积即可自动转base64，此处设为100KB
              esModule: false // 避免HTML资源解析出现模块导出异常
            }
          }
        ]
      }
    ]
  }
}

构建时会自动把HTML中写死的favicon相对路径替换成base64格式。

方案3：自定义轻量插件（无第三方依赖、适配所有webpack4场景） #

如果以上插件因为版本兼容问题失效，可以直接写一个自定义webpack插件，针对性做字符串替换，完全不依赖额外第三方包：

const fs = require('fs');
const path = require('path');

// 自定义favicon内联插件
class InlineFaviconPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('InlineFaviconPlugin', (compilation, callback) => {
      // 替换为你的本地favicon路径
      const faviconPath = path.resolve(__dirname, 'src/assets/favicon.png');
      const faviconBase64 = `data:image/png;base64,${fs.readFileSync(faviconPath).toString('base64')}`;
      // 替换为你的输出HTML文件名
      const htmlName = 'index.html';
      let htmlContent = compilation.assets[htmlName].source();
      // 匹配你原有的link标签做替换
      htmlContent = htmlContent.replace(
        /<link rel="icon" href="assets\/favicon\.png">/,
        `<link rel="icon" href="${faviconBase64}">`
      );
      compilation.assets[htmlName] = {
        source: () => htmlContent,
        size: () => htmlContent.length
      };
      callback();
    })
  }
}

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    // 其余原有插件不变，新增这个自定义插件即可
    new InlineFaviconPlugin()
  ]
}

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