前幾天學到了 PostCSS、Babel 這些後處理器，來協助在打包時改寫原始碼來支援各種瀏覽器，今天則是學習安裝預處理器來提昇開發速度。

SASS

SASS 是 CSS 的預處理器，提供許多類程式語言的邏輯運算方法，節省許多重複撰寫 CSS 的時間。

1. 安裝 sass-loader 和 sass

   $ npm i -D sass-loader sass
   

2. 編輯 webpack.config.js：

       rules: [
         {
           // 增加 scss 副檔名
           test: /\.css$|\.scss$/i,
   
           // 增加 sass-loader
           use: [
             "sass-loader",
           ],
         },
       ],
   

3. 在 src 資料夾內新增一個 all.scss，並撰寫一些 scss 語法來測試。

   $test-color: blue;
   h1 {
     color: $test-color;
   }
   

4. 編輯進入點 index.js，引入 all.scss

   import "./all.scss"
   

5. 完成後就可以 build 檢視成果。

PUG

PUG 像是 HTML 版的 SASS，也能減少許多程式碼，讓畫面變得簡潔，實際撰寫上就像是寫 Emmet 但是不用 Tab 展開一樣。

1. 安裝套件：html-loader、pug-html-loader、html-webpack-plugin

   npm i -D html-loader pug-html-loader html-webpack-plugin
   

2. 編輯 webpack.config.js

   // 插入最上方
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   ...
   // module的 rules裡面加入 html-loader、pug-html-loader
     {
        test: /\.pug$/,
        use: [
          "html-loader",
          "pug-html-loader"
        ],
     },
   ...
   // 加入 plugins 物件
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.pug',
         filename: 'index.html',
         inject: true,
         chunks: ['main'],  // 因為我的 entry名稱是main.js，所以這裡打main
         minify: {
           sortAttributes: true,
           collapseWhitespace: false, // 折疊空白字元就是壓縮Html
           collapseBooleanAttributes: true, // 折疊布林值属性，例:readonly checked
           removeComments: true, // 移除註釋
           removeAttributeQuotes: true // 移除屬性的引號
         }
       }),
     ]
   

3. 在 src 資料夾新增一個 index.pug 檔案（對應上個步驟的名稱設定），並且在裡面加入一些 pug 語法，可以直接複製官方文件的範例碼來測試。

   doctype html
   html(lang="en")
     head
       title= pageTitle
       script(type='text/javascript').
         if (foo) bar(1 + 5)
     body
       h1 Pug - node template engine
       #container.col
         if youAreUsingPug
           p You are amazing
         else
           p Get on it!
         p.
           Pug is a terse and simple templating language with a
           strong focus on performance and powerful features.
   

4. 完成後可以測試成果是否成功。

PUG官方的文件超級精簡，參考了以下文章才得以完成。
SoarLin的GitHub