使用 html-webpack-plugin 将对象传递给 ejs 加载器答案

【问题标题】：Passing an object to an ejs loader, using html-webpack-plugin使用 html-webpack-plugin 将对象传递给 ejs 加载器
【发布时间】：2017-02-12 22:49:04
【问题描述】：

我相信我已经到处寻找了，但我空手而归。我一直在使用html-webpack-plugin 从我的源中加载单个index.html 文件，但是我的客户端已经进行了一些本地化，我认为如果我可以动态添加它们会很棒。

所以我试图切换到使用html-webpack-plugin 的模板引擎，即ejs，但我遇到了重大问题！

我想要html-webpack-plugin 渲染和.ejs 文件，我需要给所说的.ejs 文件一个巨大的本地化对象。

我想要这样的东西：

<h1><%= header.title %></h1>

来自像这样的本地化 .json-文件：

{
  "header": {
    "title": "My Clients Super Awesome Website"
  }
}

我尝试使用两种不同的 ejs webpack 加载器，但我根本不知道如何将一个简单的对象传递给 ejs 加载器，我可以在我的 ejs 文件中使用它。

希望你们有一些答案 :D 在此先感谢。

【问题讨论】：

标签： javascript html webpack ejs html-webpack-plugin

【解决方案1】：

我也在寻找同样的东西。似乎模板可以访问作为 htmlWebpackPlugin.options 对象传递给 html-webpack-plugin 的选项对象。

包括例如。标题，您需要从模板中将其引用为htmlWebpackPlugin.options.title。我不知道是否有任何方法可以以更多与插件无关的方式传递值，因此您可以在模板文件中将title 引用为title。

【讨论】：

【解决方案2】：

在 index.ejs 中

<%= htmlWebpackPlugin.options.header.title %>

在 webpack.config.js 中

module: {
    rules: [
    {
        test: /.ejs$/,
        loader: 'ejs-loader'
    }
]}

和

plugins: [
new HtmlWebpackPlugin({
    header: {title: 'test'},
    template: './index.ejs',
})]

注意。不要在ejs-loader之后使用options: { variable: 'data or xxx' }，如果指定了变量，htmlWebpackPlugin将是未知的。

所以你需要在你的 webpack 配置中使用 html-webpack-plugin。并将对象放入HtmlWebpackPlugin的参数中。

【讨论】：

谢谢！你晚了大约 1.5 年，但答案是正确的，它可能对其他人有用?

【解决方案3】：

轻松插入任何参数。

// webpack.config.js

    ...
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'template/index.ejs',
      templateParameters: {
        'title': 'My Clients Super Awesome Website',
        'episode: '2'
      }
    }),
    ...

<!-- index.ejs -->

<%= title %>
<%= episode %>

【讨论】：