首页 > 编程语言> > javascript-在模板中使用动态vars将unjucks与htmlWebpackPlugin一起使用

javascript-在模板中使用动态vars将unjucks与htmlWebpackPlugin一起使用

2019-11-10 20:36:46 作者：互联网

我正在寻找一种将Nunjucks与htmlWebpackPlugin结合使用以在webpack编译中生成一些html文件的方法.

我到目前为止取得的成就

我设法通过nunjucks-html-loader从nunjucks模板文件中实际生成了HTML,但是看起来更接近于所述加载器的代码,在不将var发送给模板的情况下调用了render方法.

因此,就目前而言,使用以下插件配置,我无需动态插入var即可生成HTML

new HtmlWebpackPlugin({
  filename: path.join(__dirname, '/' + page.filename),
  template: 'nunjucks-html-loader!assets/templates/' + page.name + '.njk'
})

我尝试了什么

为了进行测试,我尝试对node_module本身进行一些更改(我知道,我知道…),并进行了更改

html = template.render(nunjucksContext);

进入

html = template.render(nunjucksContext,{globals：global.globals});

尝试在我的webpack.config.js文件中定义global.globals,但是由于以下错误而崩溃

错误中的错误：子编译失败：
模块构建失败：TypeError：parentFrame.push不是函数

这是我无法理解的.

我想要的是

是使用诸如nunjucks之类的可扩展模板引擎,它允许我像以下结构化我的模板

<html>
<!-- layout structure inherited from every template -->
</html>

我制作的每个页面都会扩展布局,并且只会覆盖某些块

我尽量避免

偏向例

头文件：

<html>
<!-- header layout -->

页脚文件

<!-- footer layout -->
</html>

我制作的每一页都包含部分内容

所以我的问题是：您是否有可能使用htmlWebpackPlugin这样的模板引擎来支持像nunjucks这样的继承,还是必须使用另一个像ejs这样的模板引擎来举例说明,并将布局分成我不喜欢的部分？

解决方法:

好吧,所以我在这里找到了nunjucks-isomorphic-loader的解决方法,它似乎并没有得到超级支持.现在就可以使用！

这是我的webPack配置

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

const DEV_ENV = process.env.NODE_ENV === 'dev'

const wpConfig = {
  entry: './assets/js/app.js',

  output: {
    path: path.resolve('./dist/js'),
    filename: 'bundle.js'
  },

  module: {
    rules: [
      // Javascript
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      },

      // Nunjucks - HTML
      {
        test: /\.njk$/,
        use: [
          {
            loader: 'nunjucks-isomorphic-loader',
            query: {
              root: [path.resolve(__dirname, 'assets/templates')]
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new webpack.DefinePlugin({
      DEV_ENV: DEV_ENV
    }),

    new HtmlWebpackPlugin({
      myOptions: { foo: 'bar' },
      filename: path.join(__dirname, '/' + page.filename),
      template: 'assets/templates/index.njk'
    })
  ]
}

module.exports = wpConfig

具有以下模板

_layout.njk

{% set vars = htmlWebpackPlugin.options.myOptions %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ vars.foo }}</title>
  </head>
  <body>
    <header>
    {% block header %}
      <h1 class="header-logo">
        <a href="#">{{ vars.foo }}</a><!-- Outputs bar -->
      </h1>
    {% endblock %}
    </header>

    {% block content %}

    {% endblock %}
  </body>
</html>

索引

{% extends "_layout.njk" %}

{% block content %}
here's the content of my `foo` var: {{ vars.foo }}
{% endblock %}

标签：html-webpack-plugin,webpack,nunjucks,javascript
来源： https://codeday.me/bug/20191110/2014905.html