運用 webpack 來使 pug 轉換成 .html。
html-loader 與 pug-html-loader
什麼是 html-loader
html-loader 是用來將 HTML 模版轉做 .html 檔來使用。
什麼是 pug-html-loader
pug-html-loader 是以 webpack 將 pug 格式轉換成 HTML 格式，但如果要輸出成 .html 檔就是要透過後面的 html-loader 來處理。
注意不是 pug-loader， pug-loader 是用來在很多的 pug 檔，直接可傳不同的變數進入模版中使用。
pug-html-loader 只能透過自已的 API，透過 options: {} 裡設定 data:{} 傳入使用，在轉出 .html 檔的 new HtmlWebpackPlugin() 中是無法傳入 pug 的資料來操作內容，使用時可以針對在 loader 取得 .pug 檔時共用 data{} 的設定。
而透過 pug-loader 方式，在自已的 API 下設定 options: { self: true, } 的方式，就可以將變數直接以 new HtmlWebpackPlugin() 中傳入 HTML 樣版中透過方法使用變數，這樣的好處是在產生 .html 時可以針對客製專屬樣版自已的變數。
安裝 html-loader 插件與 pug-html-loader 外掛
1 | npm install --save-dev html-loader pug-html-loader |
主要安裝 html-loader 插件與 pug-html-loader 外掛，但需要注意版別。
1 2 3 | npm i html-loader // 不建議直接用安裝版本 html-loader V2.0.0 for webpack 5 npm i html-loader@0.5.5 -D // 課程範例用版本 npm i html-loader@1.3.2 -D // for webpack 4 later |
更動專案資料夾結構
在 src/ 裡多加入一個 pug 資料夾，裡面專門用來放置 .pug 檔。
loader 的設定
課程中是直接使用 loader 簡寫的部份來做 .pug 的處理，先透過 pug-html-loader 後在接著 html-loader。
1 2 3 4 | { test: /\.(pug)$/, use: ['html-loader','pug-html-loader'] }, |
但要針對 .pug 做更深入設設定，分別對應下面的二個 loader 做細部設定。
設定 pug-html-loader 與 html-loader
指定 .pug 與 .jade 可共用 pug-html-loader (本來二個副檔名所處理的轉編內容都是一樣的)。
pug-html-loader 自已的 API 有專屬轉出 .html 的設定，在 API 中透過 options: {} 可用來設定 data: {} 做為 pug 傳入的變數或資料，另外 pretty: true, 是讓輸出的 HTML 格式不處理壓成單行，會以不壓縮的方式排版，另外還有其他 pug 官方文件中的 API Reference 可對照，設定方式如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | { test: /\.(pug|jade)$/, use: [ { loader: 'html-loader', options: { minimize: false, // 壓縮 HTML efault is false }, }, { loader: 'pug-html-loader', options: { data: { myVar: 'jimmyWu', }, pretty: false, // 美化 HTML 的編排 (不壓縮 HTML 的一種) Defaults to false // inlineRuntimeFunctions: true, //default is false }, }, ], }, |
以上面的方式輸出 .pug 檔，產出的 .html 會是直接單行壓縮，需要在透過 pretty: false, 將 HTML 處理成不處理單行壓縮。
html-loader 後交由 HtmlWebpackPlugin 轉出 .html 檔的設定
使用 pug 的話，就一定只能使用 HtmlWebpackPlugin 來進行轉換，pug 無法將 HTML 轉譯後直接產出 .html 檔案，內容設定如下。
1 2 3 4 5 6 | new HtmlWebpackPlugin({ title: 'pug_pug', filename: 'pug.html', template: 'pug/pug.pug', chunks: ['pug'], }), |
輸出設定說明如下
- filename：編輯輸出到 dist 的檔名。
- template：指的是 .pug 的引入來源，是在 src/ 資料夾下的的路徑 pug/pug.pug 的檔案。
- chunks: ['pug']：是 webpack 的注入點，這裡是由 src/js/pug.js 檔中指定，會在 HTML 中的 </body> 結尾標前加上 <script src=""></script> 直接自動將注入點 .js 路徑引入使用。
使用 pug 就沒辨法和 html-webpack-plugin 使用方式一樣，取用 .html 的模版一樣，透過定義參數方式由 plugins: [] 引入使用，加入到要產出的 .html 檔裡，pug 本身就可透過 extent 的方式將共用區塊模塊化，在有共同使用的 layout 引入使用，達到方便管理與自動化的處理。
將 HtmlWebpackPlugin 編譯成 .html 檔時，透過 minify: {} 設定將 HTML 單行輸出
這裡另外提一下，在 pug-html-loader、 html-loader 與 HtmlWebpackPlugin 都有自已的 API 設定，透過 HtmlWebpackPlugin 設定是不會影響到 pug 的單行壓縮處理，處理流程是由前往後，當前面已將 HTML 處理成單行後面就可略過不處理，但如過後方有除了單行以外的設定，就需要在後方的處理流程中加入設定。
以下主要是針對 html-loader 轉編後，由 template 來源是 html/ 資料夾下的 .html 樣版設定，最後以 HtmlWebpackPlugin() 轉出 .html 檔前為主的設定，若先前已處理單行多加入也沒有差別。
但特別的設設定 removeComments: true, (刪除註解) 的部份就可以單獨在這設定，設定後會針產出的 .html 檔前的檔案，如果有加入 <!-- --> 的話，就可以透過此設定將所有的註解移除處理。
設定內容如下，主要針對由 html/template.html 產出 about.html 檔的設定，設定如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | new HtmlWebpackPlugin({ title: 'About', filename: 'about.html', template: 'html/template.html', viewport: 'width=device-width, initial-scale=1.0', // 'width=640, user-scalable=no', description: 'Webpack前端自動化開發，讓你熟悉現代前端工程師開發的方法', Keywords: 'Webpack前端自動化開發、前端、工程師、線上教學、教學範例', chunks: ['about'], minify: { collapseWhitespace: true, // 塌陷空白 removeComments: true, // 刪除註解 removeRedundantAttributes: true, // 刪除多餘的屬性 removeScriptTypeAttributes: true, // 刪除腳本類型屬性 removeStyleLinkTypeAttributes: true, // 刪除樣式鏈接類型屬性 useShortDoctype: true, // 使用簡短的文檔類型 }, }), |