使用 pug (jade) 作为 HTML模板-Webpack零基础入门

当前位置:　首页>> 技术小册>> Webpack零基础入门

首先肯定会问什么是 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
```
这样基本没啥问题，来看下结果：
![](/uploads/images/20230703/34f8450eb46ff38363daccfe806c54db.png)

我们来试试 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
```
结果：

![](/uploads/images/20230703/5e290709c531166cf404afda4941ad52.png)

该分类下的相关小册推荐：

Webpack实战：入门、进阶与调优(上)

全解webpack前端开发环境定制

webpack指南

Webpack实战：入门、进阶与调优(下)

Webpack实战：入门、进阶与调优(中)