Webpack 3.x 尝试使用Pug(Jade)模板引擎

最新推荐文章于 2024-06-25 11:10:30 发布

Stangor

最新推荐文章于 2024-06-25 11:10:30 发布

阅读量3.5k

点赞数

分类专栏： webpack3-x 文章标签：模板引擎 Pug Jade

本文链接：https://blog.csdn.net/stanxl/article/details/78634520

版权

本文介绍了如何在Webpack 3.x项目中使用Pug（前称Jade）模板引擎。首先，通过安装Pug及相关依赖进行配置。在遇到编译错误后，添加html-loader解决问题。接着，演示了如何在Pug模板中嵌套其他模板，提高代码组织效率，适用于复杂的项目需求。

摘要由CSDN通过智能技术生成

关于Pug模板引擎，之前的名字叫Jade，关于它的介绍：可以参考这里，它是一个Pug – robust, elegant, feature rich template engine for Node.js。这里还有一个关于JS模板引擎的常用的几个：JS template engines。

先安装:

npm i -D pug pug-html-loader

安装完成后，它的当前最新版本是：

"pug-html-loader": "^1.1.5",

将之前的my-index.html模板改成：my-index.pug，并把内容改成github上的demo:

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug i