Webpack 2 實作筆記 (8) — 使用 Pug

如何使用 Pug template。

Webpack 2 — How to use pug (jade) templates with Webpack

安裝 pugpug-html-loaderhtml-loader

$ yarn add -D pug pug-html-loader html-loader

影片只裝了 pugpug-html-loader,但實際上實作出現錯誤,看了一下 pug-html-loader 文件,看來要搭配 html-loader 使用,就沒有錯誤訊息了。

把原本的 src/index.html 改成 src/index.pug,內容改成 Pug:

doctype html
html
head
title demo
body
#root

設定 webpack.config.js

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

執行 yarn run dev 觀看成果。

再來試試 include 其他 Pug file 到 src/index.pug,建立 src/includes/header.pug

h1 This Header from include file

修改 index.pug

doctype html
html
head
title demo
body
include includes/header.pug
#root

執行 yarn run dev 觀看成果。


還有另一個 loader 是 pug-loader,實測只要裝這個 loader 也可以順利編譯 Pug file:

...
module: {
rules: [
...
{
test: /\.pug$/,
use: 'pug-loader'
},
],
},
...
Show your support

Clapping shows how much you appreciated Toumasaya’s story.