使用Webpack HtmlWebpackPlugin加载模板时能否传递参数？

HtmlWebpackPlugin 完全支持向模板传递参数，结合模板引擎（默认是 EJS）就能实现你要的动态模板效果，不用额外引入 PHP 或复杂的 JS 逻辑。下面给你两种实用的实现方式：

方法一：利用 HtmlWebpackPlugin 配置 + EJS include 传参 #

这是最简洁的方案，直接用插件自带的能力：

1. 在 Webpack 配置中给每个页面传参 #

修改 webpack.config.js，给每个 HtmlWebpackPlugin 实例添加 templateParameters，传入当前页面的标识：

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

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/pages/index.html',
      // 给首页传入活跃页面标识
      templateParameters: {
        activePage: 'home'
      }
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: './src/pages/about.html',
      // 给关于页传入活跃页面标识
      templateParameters: {
        activePage: 'about'
      }
    })
  ]
};

2. 改造菜单模板，支持变量判断 #

修改你的顶部菜单模板（比如 src/partials/menu.html），用 EJS 语法根据传入的变量设置活跃状态：

<nav class="top-menu">
  <ul>
    <li class="<%= activePage === 'home' ? 'active' : '' %>">
      <a href="/index.html">首页</a>
    </li>
    <li class="<%= activePage === 'about' ? 'active' : '' %>">
      <a href="/about.html">关于我们</a>
    </li>
    <li class="<%= activePage === 'contact' ? 'active' : '' %>">
      <a href="/contact.html">联系我们</a>
    </li>
  </ul>
</nav>

3. 在主页面模板中加载菜单并传参 #

在你的页面模板（比如 src/pages/index.html）中，用 EJS 的 include 语法加载菜单模板，并把配置里的参数传进去：

<!-- 加载顶部菜单模板，传入当前活跃页面参数 -->
<%- include('../../partials/menu.html', { activePage: activePage }) %>

<!-- 页面其他内容 -->
<h1>首页内容</h1>

这里用 <%- 而不是 <%=，是为了直接输出 HTML 内容，避免字符转义。

方法二：结合 raw-loader + Lodash 模板编译传参 #

如果你习惯用 require 加载模板的方式，可以用这个方案：

1. 安装依赖 #

先安装 Lodash 和 raw-loader：

npm install lodash raw-loader --save-dev

2. 配置 Webpack 启用 raw-loader #

在 webpack.config.js 中添加规则，用 raw-loader 加载 HTML 模板内容：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'raw-loader',
        exclude: /node_modules/
      }
    ]
  }
};

3. 在主页面中编译模板并传参 #

在页面模板中，用 Lodash 的 template 方法编译加载的模板，同时传入参数：

<% 
// 加载菜单模板内容
const menuTemplate = require('../../partials/menu.html');
// 编译模板
const renderMenu = _.template(menuTemplate);
%>

<!-- 渲染菜单，传入当前活跃页面参数 -->
<%- renderMenu({ activePage: activePage }) %>

这里的 activePage 同样来自 HtmlWebpackPlugin 配置的 templateParameters。

两种方案都能实现你的需求，推荐第一种，因为更贴合 HtmlWebpackPlugin 的原生能力，配置也更简单。

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