使用Webpack将HTML文件导入模板字符串的技术问题

你遇到的核心问题是：Webpack默认把HTML文件当作纯文本导入，导致模板里的${info.name}没有被替换成实际变量值，而是直接输出了字符串字面量。这是因为Webpack本身不会自动解析HTML中的ES模板字符串插值，得我们手动配置或在代码里处理。

下面给你两种实用的解决方案：

方案一：手动在代码中编译模板字符串 #

这个方法无需额外配置Webpack，适合简单场景。我们可以把导入的HTML字符串当作模板，用Function构造函数动态编译它，传入info作为上下文：

import { info } from "./info";
import t from "../components/test.html";

// 将HTML字符串转为可接收info参数的渲染函数
const renderTemplate = new Function('info', `return \`${t}\``);
// 传入info生成最终的插值HTML
const renderedHtml = renderTemplate(info);

console.log(renderedHtml); // 现在会输出：<div> <b>Name: </b> Some name </div>

原理是利用ES模板字符串的特性，把导入的HTML字符串包裹在模板语法中，通过Function动态创建函数，传入info后就能自动替换掉里面的${info.name}变量。

方案二：使用模板引擎Loader（以EJS Loader为例） #

如果你的模板逻辑比较复杂，推荐用专业模板引擎处理。这里以EJS为例，步骤如下：

1. 先安装ejs-loader：

npm install ejs-loader --save-dev

2. 修改Webpack配置文件，添加对应的loader规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        use: ['ejs-loader'],
      },
    ],
  },
};

3. 调整test.html，改用EJS的插值语法（<%= 变量 %>）：

<div> <b>Name: </b> <%= info.name %> </div>

4. 在app.js中调用模板函数生成最终HTML：

import { info } from "./info";
import renderTemplate from "../components/test.html";

const renderedHtml = renderTemplate(info);
console.log(renderedHtml); // 输出正确插值后的HTML

为什么原代码无法生效？ #

当你直接导入.html文件时，若未配置对应loader，Webpack会默认将其当作纯文本资源处理——导入的t就是原始HTML字符串，其中的${info.name}只是字符串的一部分，不会被JavaScript解析为变量插值。所以我们需要通过上述方法，告诉Webpack如何处理这些模板变量。

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