[Day18] Webpack - 预处理器

前几天学到了 PostCSS、Babel 这些後处理器，来协助在打包时改写原始码来支援各种浏览器，今天则是学习安装预处理器来提昇开发速度。

SASS

SASS 是 CSS 的预处理器，提供许多类程序语言的逻辑运算方法，节省许多重复撰写 CSS 的时间。

安装 sass-loader 和 sass
```
$ npm i -D sass-loader sass
```

编辑 webpack.config.js：

    rules: [
      {
        // 增加 scss 副档名
        test: /\.css$|\.scss$/i,

        // 增加 sass-loader
        use: [
          "sass-loader",
        ],
      },
    ],

在 src 资料夹内新增一个 all.scss，并撰写一些 scss 语法来测试。
```
$test-color: blue;
h1 {
  color: $test-color;
}
```
编辑进入点 index.js，引入 all.scss
```
import "./all.scss"
```
完成後就可以 build 检视成果。

PUG

PUG 像是 HTML 版的 SASS，也能减少许多程序码，让画面变得简洁，实际撰写上就像是写 Emmet 但是不用 Tab 展开一样。

安装套件：html-loader、pug-html-loader、html-webpack-plugin
```
npm i -D html-loader pug-html-loader html-webpack-plugin
```

编辑 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 // 移除属性的引号
      }
    }),
  ]

在 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.