# 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 ``` 結果：  先這樣吧。