EP 7 - 關於 Webpack 學習這件小事之使用 HTML Template (PUG 篇)

前言

接下來將要來記錄我常用來切版的 HTML Template 語言,也就是 PUG,這邊並不會教學該如何撰寫 PUG 而是記錄該如何安裝 PUG 及編譯而已。

起手式

睽違一章節又到了起手式的時間,首先我們這邊必須安裝一些套件才可以讓我們可以撰寫 PUG

1
npm install --save-dev pug pug-html-loader raw-loader

設置 webpack.config.js

那接下來當然是要來設置 webpack.config.js,所以開啟 webpack.config.js,首先先將 HtmlWebpackPlugin 做調整

1
2
3
4
new HtmlWebpackPlugin({
template: 'src/page/index.pug',
filename: 'index.html'
}),

再來是 rules 再加入一段

1
2
3
4
{ 
test: /\.pug$/,
loader: ['raw-loader', 'pug-html-loader']
}

rules

接下來將 page 底下的 index.html 改成 index.pug,並且寫法換成 PUG 的寫法

PUG

這時候就可以試著執行 Web Server 哩~

Web Server

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ