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

發表於 2019-06-07 更新於 2021-02-21 分類於 Webpack

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

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

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

前言

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

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

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

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

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

再來是 rules 再加入一段

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

rules

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

PUG

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

Web Server