首先肯定会问什么是 ，如果是 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 htmlhtml(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复制代码

结果：

先这样吧。