此篇介紹如何加入並使用 pug-loader，並使用 PUG 語法測試撰寫 html。

安裝 pug-loader

1
npm i -D pug pug-loader

設定 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
......

module.exports = {
  ......
  module: {
    rules: [
      ......
      {
        test: /\.pug$/,
        use: 'pug-loader'
      }
    ]
  },
  ......
}

撰寫 index.pug

接著我們嘗試把 index.html 改檔名為 index.pug，並把內容換成以下 Pug 範例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #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.

接著記得把 webpack.config.js plugin 中的 HtmlWebpackPlugin 設定換成現在新的 Pug 檔案。

1
2
3
4
5
6
7
8
9
module.exports = {
  ......
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.pug'
    }),
    ......
  ]
}

執行 npm run dev，就可以看到 Pug 執行出來的畫面囉。

執行 npm run dev 後畫面

今天的範例 Github 在此，下次見～

參考資料