如何在Webpack打包过程中将HTML内容注入至另一文件

这事儿用Webpack的生态插件就能轻松搞定，我给你分享两种项目里常用的实现方式，都是实际验证过的：

方案一：html-webpack-plugin + html-loader（最便捷） #

这种方式靠html-webpack-plugin处理主HTML模板，配合html-loader导入解析另一个HTML文件的内容，最终自动注入到打包后的主文件里。

步骤1：安装依赖 #

先把需要的插件装到开发依赖中：

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

步骤2：配置Webpack（webpack.config.js） #

在Webpack配置文件里添加规则和插件配置：

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

module.exports = {
  // 你的其他Webpack配置（entry、output等）
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              esModule: false, // 关闭ES模块导出，方便模板直接调用
              minimize: false, // 如果不需要压缩another.html内容，保持默认false即可
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html', // 指定你的主HTML模板路径
      filename: 'index.html', // 打包后生成的文件名
    })
  ]
};

步骤3：修改主HTML模板（index.html） #

把原index.html改成模板，在合适位置（推荐用隐藏的<svg>包裹，方便后续复用symbol）注入another.html的内容：

<html>
<head></head>
<body>
  <p>Hello World</p>
  <!-- 注入图标symbol集合，用隐藏svg避免影响页面布局 -->
  <svg style="display: none;">
    <%= require('./another.html') %>
  </svg>
</body>
</html>

打包完成后，another.html里的所有<symbol>标签都会被注入到主HTML的隐藏svg中，你可以直接用<use href="#a"></use>这类语法调用图标。

方案二：自定义Webpack插件（灵活度更高） #

如果需要对注入内容做定制化处理（比如过滤特定标签、修改内容后再注入），可以写一个简单的自定义插件：

步骤1：编写自定义插件 #

在项目里新建html-inject-plugin.js文件：

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

class HtmlInjectPlugin {
  constructor(options) {
    this.sourcePath = options.sourcePath; // 要注入的HTML文件路径
    this.targetSelector = options.targetSelector; // 注入到主HTML的目标元素
  }

  apply(compiler) {
    compiler.hooks.compilation.tap('HtmlInjectPlugin', (compilation) => {
      // 监听html-webpack-plugin的模板处理钩子
      const hooks = require('html-webpack-plugin').getHooks(compilation);
      hooks.beforeEmit.tapAsync('HtmlInjectPlugin', (data, cb) => {
        // 读取要注入的HTML内容
        const injectContent = fs.readFileSync(path.resolve(this.sourcePath), 'utf8');
        // 找到目标元素位置并插入内容
        data.html = data.html.replace(
          new RegExp(`(<${this.targetSelector}>)(.*?)(</${this.targetSelector}>)`, 's'),
          `$1$2${injectContent}$3`
        );
        cb(null, data);
      });
    });
  }
}

module.exports = HtmlInjectPlugin;

步骤2：配置Webpack使用自定义插件 #

在webpack.config.js里引入并配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInjectPlugin = require('./html-inject-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
    }),
    new HtmlInjectPlugin({
      sourcePath: './another.html', // 要注入的文件路径
      targetSelector: 'body' // 注入到body标签内
    })
  ]
};

这种方式适合有特殊注入逻辑的场景，比如只保留特定ID的symbol、给标签添加自定义属性等。

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