11. 如何使用 pug (jade) 作为 HTML 的模板
最后更新于：2022-04-02 01:40:17
# 11. 如何使用 pug (jade) 作为 HTML 的模板
首先肯定会问什么是 [pug](https://github.com/pugjs/pug)，如果是 nodejs 程序员的话，肯定听过 `jade` 吧，`pug` 就是 从 `jade` 改名过来的。
说白了，它就是可以让你以更好的语法来写 html 。
下面看看例子就会清楚的。
现在我们就要代替之前的 `src/index.html` 改用 pug 语法来写。
首先把 `src/index.html` 改名叫 `src/index.pug`
```
$ rename src/index.html src/index.pug
```
**src/index.pug**
```
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#root
#container.col
if youAreUsingPug
p You are amazing
else
p Get on it!
p.
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.
```
上面的内容是从 `pug` 官方的示例中抄的，然后稍微改了一下。
**webpack.config.js**
```
...
module.exports = {
...
plugins: [
...
new HtmlWebpackPlugin({
template: './src/index.pug',
...
}),
...
],
module: {
rules: [
...
{ test: /\.pug$/, loader: ['raw-loader', 'pug-html-loader'] }
]
}
};
```
```
$ npm install --save-dev pug pug-html-loader raw-loader
```
这样基本没啥问题，来看下结果：
我们来试试 `pug` 的 `include` 功能，就是可以包含子模板。
**src/index.pug**
```
...
body
include includes/header.pug
...
```
**src/includes/header.png**
```
h1 from header pug file
```
目录结构是这样的：
```
src
├── Root.js
├── app.js
├── app.scss
├── contact.html
├── contact.js
├── includes
│ └── header.pug
└── index.pug
```
结果：
先这样吧。
';