如果你是常切版的前端工程師，你一定要知道pug!
use webpack4 compile .pug(jade) to html
由於最近接手了一個現有的web project要繼續延伸開發
原始碼都是HTML，又有多個頁面
寫多了我真的受不了，所以回來重溫pug的懷抱~
也由於我只需要pug的compile環境
所以自己寫了一個webpack-pug-boilerplate
(真的就只有webpack & pug哈哈)
以下是我建置webpack環境的筆記~
所以文章應該比較適合想要把webpack & pug導入工作流程的前端工程師~
最下面的Reference Tutorial部分有繁體中文教學的連結
舉例+說明都非常詳細清楚好懂
給大家參考
不過我上次用pug的時候還叫做jade…
那時候還在用gulp，現在大家都用webpack
到底是我老太多了還是前端變太快QQ
如果你是常切版的前端工程師，你一定要知道pug!
pug本來的名稱叫做jade
不過由於jade這個名稱後來出現版權問題，所以作者改名為pug
身為前端工程師都知道，HTML不好寫
而且不只是不好寫，是靠北的難寫阿
1.HTML必須要寫start tag/end tag
打這麼多<和>太浪費時間了啦，少打還會噴錯、跑版，根本要命
工程師就是要懶，我覺得不行
2. 沒有模板機制，超難維護
想像一下，今天一個網頁有12個版面
如果今天只純切版，不套任何後端語言的架構
你先做好header、footer，然後依序複製到並做好12個版面
結果PM跟你說：「我們header的部分要重新設計了，麻煩你重新出新的版面給後端套」
這時候怎麼辦?
你只好做好新的header複製貼上12次
那如果footer也要改呢?
你就會變成複製貼上達人
複製貼上完能work已經是最理想的狀況了
現實中隨便改都會出問題讓人抓狂…
3.一時之間想不到了，但是上面2點就夠讓人哭了
由於以上種種問題
所以在人人都靠gulp在compile js，webpack尚未興起的時候
jade這款base on Node.js的模板引擎就出現了
除了簡潔的語法以外，模板引擎的環境是使用js
所以可以直接在模板內撰寫js code，這點對前端工程師超級友善的阿!!!
而且可以有支援類似物件導向的概念，有提供繼承、引用模板等等功能
來看一下最簡單的Demo
pug不需要start/end tag，像是python那樣用tab跟空格來縮排表示scope層級
想玩看看也可以用這個所見即所得的Jade to HTML editor
講這麼多，Webpack要出場了
先說明一下，我使用的開發環境是webpack4(最新就是潮)
webpack3之後，webpack cli已經從webpack主專案中拆分出來
所以要使用webpack4的話
除了安裝webpack，還要下載webpack-cli這個package
如果要在file change時重新build的話就再加上webpack-dev-server
$ npm i -D webpack webpack-cli webpack-dev-server接著由於需要輸出HTML，所以需要安裝html-webpack-plugin
$ npm i -D html-webpack-plugin最核心的部分是pug-loader
npm上有名為pug-loader的套件，但是我實際測試build會error
所以pug-html-loader搭配pug & html-loader來使用
$ npm i -D pug html-loader pug-html-loader接下來要配置webpack.config.js
entry & output的部分
因為entry不能是空的
所以我這邊指定一隻空的js去讓webpack run
...
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
...然後指定附檔名是pug的檔案，要交給哪一個loader做compile
for copy
...
module: {
rules: [{
test: /\.pug$/,
use: ['html-loader','pug-html-loader']
}]
},
...整個build的過程最後要靠html-webpack-plugin產生HTMLhtml-webpack-plugin的一個實例(instance)會負責輸出一個pug build成HTML的頁面，也就是說有幾個頁面就要有幾個html-webpack-plugin實例
像是下面就會分別產生index.html和test.html這兩個檔案
...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.pug',
filename:'./index.html'
}),
new HtmlWebpackPlugin({
template: './src/test.pug',
filename:'./test.html'
}),
],
...打完收工~
Reference
Tutorial
pug doc
webpack install pug
html-webpack-plugin詳細介紹
