Webpack中<% .. %>脚本小工具的工作机制及相关疑问

嘿，作为Webpack新手，能注意到这个“魔法”细节真的很棒！我来给你拆解清楚这背后的逻辑：

核心结论：默认是html-webpack-plugin内置的EJS模板能力 #

你看到的<%= htmlWebpackPlugin.options.title %>和<% ... js代码 %>这种语法，是EJS模板引擎的标准写法，而html-webpack-plugin默认集成了EJS的渲染功能——也就是说，这既不是Webpack原生自带的，也不需要额外装单独的loader（当然你可以扩展成其他模板引擎）。

具体拆解几个疑问： #

• 它属于html-webpack-plugin的一部分吗？
  对的！默认情况下，插件自带了EJS解析能力。当你配置插件时，不管是用它的默认模板，还是自己写的.html模板文件，插件都会自动识别并解析这些EJS标签。
  比如你例子里的htmlWebpackPlugin是插件传给模板的全局对象，里面包含了你在插件配置里设置的所有options，还有打包后的文件信息、环境变量等实用数据。

• 能不能配合其他loader使用？
  完全可以！如果你更喜欢用Pug、Handlebars、Nunjucks这类模板引擎，只需要安装对应的loader（比如pug-loader、handlebars-loader），然后在html-webpack-plugin的配置里指定你的模板文件路径就行。举个Pug的例子：

  // webpack.config.js
  module.exports = {
    // ...其他配置
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.pug' // 指定Pug模板文件
      })
    ],
    module: {
      rules: [
        { test: /\.pug$/, use: 'pug-loader' }
      ]
    }
  };
  

  这样Webpack会先调用pug-loader处理你的模板，再交给html-webpack-plugin生成最终的HTML文件。

• 相关文档在哪找？
  直接去html-webpack-plugin的官方文档里找「Templates」（模板）相关章节就行，里面会详细讲：

  • 默认EJS模板的可用全局变量（比如htmlWebpackPlugin.options、htmlWebpackPlugin.files）
  • 如何自定义模板文件
  • 如何配合第三方模板引擎loader使用
    如果你想深入EJS本身的语法，也可以看EJS的官方文档，但对于Webpack场景来说，重点是掌握插件传给模板的那些专属变量。

小提示 #

搜索的时候别搜<%=，直接搜「html-webpack-plugin template syntax」或者「html-webpack-plugin EJS」，就能快速找到相关资料啦～

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