使用html-webpack-plugin将对象传递给ejs加载程序。

Question

我想我到处都找过了，但我空手而归。我一直在使用html-webpack-plugin从我的源代码加载一个index.html文件，但是我的客户端附带了一些本地化，我认为如果能够动态地添加它们，那就太好了。

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

我想要html-webpack-plugin呈现和.ejs文件，我需要给这个.ejs文件一个巨大的本地化对象。

我想要这样的东西：

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

来自本地化的.json-file，如下所示：

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

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

希望你们有一些答案:I‘我提前感谢。

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

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

包括例如。标题中，您需要将它从模板中引用为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 %>