在webpack中使用Pug產生Html

Webpack是JavaScript的模組建置工具，運行在Node.js上，它可以將零散的JavaScript檔案用各式工具優化並打包起來，加快網頁的載入時間。Webpack也並不限於用在JavaScript上，它除了還能打包網頁有用到的靜態資源(如JS、CSS、圖片檔等)外，也還能透過HTML模板來產生HTML網頁。

首先先安裝Webpack：

npm install --save-dev webpack webpack-cli

建立webpack.config.js。

然後安裝Pug：

npm install --save-dev html-loader pug-html-loader html-webpack-plugin

接著在webpack.config.js裡

// webpack.config.js

    # 先引入 plugin
    var HtmlWebpackPlugin = require('html-webpack-plugin')

    # 在module裡加入規則
      rules: [
        {
          test: /\.pug$/,
          use: [
              {
              loader: 'html-loader',
                  options: {
                      minimize: false 
                      // 不壓縮 HTML
                  }
              },
              {
              loader: 'pug-html-loader',
                  options: {
                      pretty: true 
                     // 美化 HTML 的編排 (不壓縮HTML的一種)
                  }
              },
          ]
        },
    ]
    
    # 在plugins裡新增路徑與轉出的位置及細節調整
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/pug/index.pug'),
      filename:'index.html',
      inject: true, 
      // 等於'body',javascript 資源將被放置到body元素的底部
      chunks: ['device', 'main'], 
      // 指定需要引入的js，沒有設置默認全部引入
      excludeChunks: ['devor.js'], 
      // 排除的js
      minify: {
        sortAttributes: true,
        collapseWhitespace: false, 
        // 折疊空白字元就是壓縮Html
        collapseBooleanAttributes: true, 
        // 折疊布林值属性，例:readonly checked
        removeComments: true,
        // 移除註釋
        removeAttributeQuotes: true 
        // 移除屬性的引號
      }
    })

這邊需要對照pug的頁數寫出同等數量的HtmlWebpackPlugin，一頁pug轉出一頁Html，感覺很費時，我們可以運用forEach去pag路徑裡自動產生相對應數量的HtmlWebpackPlugin在push進plugins，如下：

const glob = require('glob');
glob.sync('./src/pug/*.pug').forEach((name) => {
  const start = name.indexOf('/pug/') + 5;
  const end = name.length - 4;
  const n = name.slice(start,end);
  config.plugins.push(
   new HtmlWebpackPlugin({
     template: path.join(__dirname, 'src/pug/'+n+'.pug'),
     filename: n +'.html',
     inject: true, 
     minify: {
       sortAttributes: true,
       collapseWhitespace: false,
       collapseBooleanAttributes: true, 
       removeComments: true 
     }
  })
 );
});
module.exports = config;