webpack 3 零基礎入門教程 #11 - 如何使用 pug (jade) 做爲 HTML 的模板

首先確定會問什麼是 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
複製代碼

結果：

先這樣吧。