我正在寻找一种使用 Nunjucks 和 htmlWebpackPlugin 在 webpack 编译时生成一些 html 文件的方法。
到目前为止我取得了什么
我设法通过 nunjucks-html-loader 从 nunjucks 模板文件实际生成了 HTML但是仔细观察所述加载器的代码，调用渲染方法时没有将变量发送到模板。
因此，现在使用以下插件配置，我生成的 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>
我制作的每个页面都扩展了布局并且只覆盖了一些 block
我尽量避免的事情
部分例如例如
头文件:
<html>
<!-- header layout -->
页脚文件
<!-- footer layout -->
</html>
我制作的每个页面都包含部分内容
所以我的问题是:是否有可能使用支持继承的模板引擎，如 nunjucks 和 htmlWebpackPlugin，或者是否必须使用另一个像 ejs 的模板引擎，例如将布局分块成我不喜欢的部分？
最佳答案
好吧，所以我在这里找到了一个解决方法 nunjucks-isomorphic-loader这似乎不是 super 支持，但仍然。目前有效!
这是我的 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>
index.njk
{% extends "_layout.njk" %}
{% block content %}
here's the content of my `foo` var: {{ vars.foo }}
{% endblock %}
关于javascript - 在模板中使用动态变量将 nunjucks 与 htmlWebpackPlugin 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47335302/