当前位置: 首页 > 資訊 >

[Day18] Webpack - 預處理器

前幾天學到了 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


上一篇: D25 第十二週 (回憶篇)

下一篇: 第六章