Webpack无法在嵌套HTML片段中渲染子HTML片段的问题咨询

我明白你的困扰——用Webpack构建EJS模板时，内层HTML组件里的require语句没被解析，直接原封不动输出了。这是因为当前的loader配置没处理好嵌套组件里的EJS语法，新版html-loader移除interpolate后确实得换个思路处理。

问题根源 #

你现在的流程存在一个关键漏洞：

1. HtmlWebpackPlugin用EJS引擎渲染home.html.ejs，外层的<%= require('./header.html') %>会被执行，调用html-loader加载header.html。
2. 但html-loader默认只把header.html的内容当作纯文本返回，不会解析其中的EJS代码（也就是<%= require('./breadcrumbs.html') %>），所以这段模板代码直接被输出到最终HTML里，没有被执行。

两种可行解决方案 #

方案1：将组件改为EJS后缀，配置ejs-loader #

这是最清晰的方式，明确区分纯HTML和含模板语法的文件：

1. 重命名组件文件：把src/parts/header.html改成src/parts/header.ejs，src/parts/breadcrumbs.html改成src/parts/breadcrumbs.ejs。
2. 更新Webpack配置：添加对.ejs文件的loader规则：

   module.exports = {
     // ...其他配置
     module: {
       rules: [
         // 先处理EJS模板
         {
           test: /\.ejs$/,
           use: ['ejs-loader']
         },
         // 保留原有的html-loader规则（处理纯HTML文件）
         {
           test: /\.html$/,
           loader: 'html-loader',
         },
         // ...你的css、字体loader规则不变
       ]
     }
   }
   

3. 修改模板引用：
   • home.html.ejs里改成：<%= require('./parts/header.ejs') %>
   • header.ejs里改成：<%= require('./breadcrumbs.ejs') %>

这样，嵌套的组件文件会被ejs-loader解析，里面的require语句会被正确执行，最终所有内容都会编译成纯HTML。

方案2：不修改后缀，让html-loader配合ejs-loader处理 #

如果你不想改动文件后缀，可以调整loader顺序，让.html文件先经过ejs-loader解析模板语法，再用html-loader处理资源引用：

1. 安装ejs-loader：

   npm install ejs-loader --save-dev
   

2. 更新Webpack的html-loader规则：

   module.exports = {
     // ...其他配置
     module: {
       rules: [
         {
           test: /\.html$/,
           use: [
             'html-loader',
             'ejs-loader'
           ]
         },
         // ...其他规则不变
       ]
     }
   }
   

   注意loader顺序是从后往前执行的，所以ejs-loader先解析文件里的EJS语法，再交给html-loader处理。

这样不用改文件名，就能让内层的require语句被正确解析了。

验证 #

完成配置后，重新运行Webpack构建，你会发现最终的index.html里会正确输出：

<h1>Title</h1>
It's a breadcrumb!

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