前言
随着前端技术的不断发展，网页模板渲染模块化的需求日益增加。Nunjucks是一款适用于Nodejs和浏览器环境的模板引擎，它允许在模板中使用可重用的组件，继承和布局，以及动态的内容生成。nunjucks-loader是一个npm包，它提供了一种将Nunjucks模板与Webpack打包的便捷方法。
安装
你可以通过NPM来安装nunjucks-loader。
npm install nunjucks-loader --save-dev
使用方法
nunjucks-loader需要以下五个步骤来设置:
安装Nunjucks
由于nunjucks-loader是基于Nunjucks模板引擎的，因此必须先安装它。
npm install nunjucks --save-dev
安装Webpack
如果你还没有安装Webpack，请按照以下方法安装。
npm install webpack --save-dev
在webpack配置文件中设置nunjucks-loader
Nunjucks-loader需要在Webpack的配置文件中进行编写。
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------- - ------ - - ----- -------------- ---- - - ------- ----------------- - -- -------- - ----------------------- ------------ -- -------- -------------- - - - --在上面的代码中，我们的nunjucks-loader被设置为用于所有.nunjucks文件，被包含在“src/views”文件夹中但不包括/node_modules文件夹下的任何文件。注意，这里的loader名字必须为“nunjucks-loader”。
创建Nunjucks模板
创建一个.Nunjucks文件并在其中编写你的HTML和Nunjucks代码。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ----- ---------------------------- ------------------ --------- ----- ---------- ------- ------ ------ ------- ------- -- -- ---- -- ---- -- --- ---- -- ---- -- ------ ---- ------- -- ------ -- ----- -- ---- -- ----- ----- ---------- -- ----- -- ------- -------在模板中，我们使用了Nunjucks模板语言来动态生成HTML代码。
在Webpack中引用Nunjucks模板
引用我们刚刚创建的Nunjucks模板。
-- -------------------- ---- ------- ------ -------- ---- ---------------------------- ----- ---- - - ------ --- ------- -------- --- --------- ----- ------ --- ----- --- ----- --- -- ---------------------------------------- - ----------------------在上面的代码中，我们首先导入了我们的模板，并在模板中填充数据。接下来，我们将数据渲染到浏览器中。则输出的html应该如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ----- ---------------------------- ------------------ --------- ------------- ------- ------ ------ ------------ ---- -------- ------ -------- ------ -------- ------ ----- ------- -------
总结
通过本文，我们已经学会了如何使用nunjucks-loader将Nunjucks模板与Webpack打包，这为我们日后的前端开发打下了坚实的基础。如果你还未使用Nunjucks和Webpack，那么现在就是学习他们的好时机了。代码示例：https://github.com/jainsourabh/nunjucks-loader-example
参考文章：
[1] https://www.npmjs.com/package/nunjucks-loader
[2] https://mozilla.github.io/nunjucks/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196599