如何通过Webpack实现HTML模板导入至其他HTML文件？

嘿，我刚好处理过类似的需求，给你推荐几个易用的方案，能完美配合Webpack实现HTML文件的包含（模板复用）功能，和你正在用的HtmlWebpackPlugin也能很好兼容：

方案1：使用html-loader（最轻量化的选择） #

html-loader本身就支持通过require语法引入其他HTML片段，配置简单，无需额外学习模板语法。

步骤1：安装依赖 #

npm install html-loader --save-dev

步骤2：配置Webpack #

在webpack.config.js中添加loader规则，并调整HtmlWebpackPlugin的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: false, // 调试阶段可以关闭压缩，方便查看代码
              sources: false, // 不需要处理HTML内资源引用（如img的src）时可设为false
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 你的主模板文件路径
      filename: 'index.html'
    })
  ]
};

步骤3：在HTML中使用包含功能 #

假设你有一个头部片段src/partials/header.html：

<header>
  <h1>我的网站标题</h1>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
  </nav>
</header>

然后在主模板index.html中这样引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础模板示例</title>
</head>
<body>
  <!-- 引入头部片段 -->
  ${require('./partials/header.html').default}

  <main>
    <p>这里是页面主内容区域</p>
  </main>

  <!-- 同样可以引入底部片段 -->
  ${require('./partials/footer.html').default}
</body>
</html>

方案2：使用EJS模板（HtmlWebpackPlugin原生支持） #

如果你能接受简单的模板语法，EJS是个省心的选择——HtmlWebpackPlugin原生就支持EJS，几乎不需要额外配置。

步骤1：准备EJS模板文件 #

将主模板改为index.ejs（或者保留.html后缀也可），用EJS的include语法引入片段：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础模板示例</title>
</head>
<body>
  <!-- 引入头部片段 -->
  <% include ./partials/header.html %>

  <main>
    <p>这里是页面主内容区域</p>
  </main>

  <!-- 引入底部片段 -->
  <% include ./partials/footer.html %>
</body>
</html>

步骤2：配置HtmlWebpackPlugin #

只需在Webpack配置中指定模板路径即可：

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.ejs',
    filename: 'index.html'
  })
]

如果你的片段也是EJS文件（如header.ejs），直接用<% include ./partials/header.ejs %>即可，还能传递变量，灵活性更高。

方案3：使用handlebars-loader（适合复杂模板场景） #

如果你的模板需要条件判断、循环等复杂逻辑，Handlebars是更强大的选择，也支持文件包含功能。

步骤1：安装依赖 #

npm install handlebars-loader handlebars --save-dev

步骤2：配置Webpack #

module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/,
        use: ['handlebars-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.hbs',
      filename: 'index.html'
    })
  ]
};

步骤3：使用Handlebars的Partial功能 #

先注册你的Partial（可在Webpack配置或单独JS文件中完成），然后在主模板中调用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础模板示例</title>
</head>
<body>
  {{> header}}

  <main>
    <p>这里是页面主内容区域</p>
  </main>

  {{> footer}}
</body>
</html>

其中header和footer是你注册的Partial名称，对应文件如src/partials/header.hbs。

个人建议先尝试html-loader，它最贴近原生HTML写法，无需学习新语法，适合基础的文件包含需求；如果之后需要更复杂的模板逻辑，再切换到EJS或Handlebars都很顺畅。

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