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

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' }after ejs-loader，如果指定了变量，htmlWebpackPlugin将是未知的。

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