传递对象到EJS装载机，使用HTML的WebPack-插件

Question

我相信我已经到处找，但我拿出空手而归。我已经使用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感谢。

Answer 1

在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',
})]

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

所以你需要使用的HTML的WebPack-插件在你的WebPack配置。并把对象变成HtmlWebpackPlugin的参数。

Answer 2

我一直在寻找同样的事情。好像模板可以访问选项对象传递到HTML的的WebPack-插件作为htmlWebpackPlugin.options对象。

包括如。标题，你需要从模板htmlWebpackPlugin.options.title引用它。我不知道是否有什么办法能在更多的插件无关的方式传递值，所以你可以参考title作为title在模板文件。

Answer 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 %>