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

0%