Thumb 0427

新手向 Webpack 完全攻略 (6) – 乾淨俐落抽出 CSS

by Roy Huang 2017-06-23 09:16 UTC

上一個章節中,我們提到了要如何設定 Loader 來編譯 CSS 檔案,可是有人可能會覺得:把 Stylesheet 的內容都塞在 Head 裡面,很醜啊!有沒有什麼比較好的方法呢?有的!今天讓我們來介紹一個 Plugin 叫做 extract-text-webpack-plugin

簡單來說,這個 Plugin 可以把你的 CSS 全部抽出來並且編譯成一個檔案,有點像 Loader 將所有 JS 結合在一起,只是我們的對象是 CSS 檔案。

為了使用這個 Plugin,首先我們必須要安裝它並且在 Webpack 裡面稍作設定。

npm install -D extract-text-webpack-plugin

  // require plugin at the top of the file
  const ExtractTextPlugin = requrie('extract-text-webpack-plugin');

  // .. some other settings

  module:  {
  // .. other settings above
      {
        loader: ExtractTextPlugin.extract({
          loader: "css-loader",
        }),
        test: /\.css$/
      }
    ]
  }, 

  plugins: [
    new ExtractTextPlugin('styles.css')
  ]

首先,我們把原本使用 css-loader 以及 style-loader 的部分拿掉,換上一個新的物件(還記得 style-loader 的用途嗎?它負責將 CSS 插入文件裡面,但我們這次想要輸出成一個檔案,所以就不需要使用它了。)在這邊我們可以看到,物件的第一個 Property 變成 loader 而不是之前使用的 use,其實在 Webpack 的設定當中, loader 以及 use 這兩個 Property 是可以互通的!不過,由於這個 Plugin API 寫法的關係,我們必須使用 loader 當 Property 而不能使用 use

接著我們在它的 Argument 裡面放入一個物件,告訴這個 Plugin 我們要使用 css-loader 來編譯。接著與之前相同,我們必須告訴 Webpack 要對所有結尾為 css 的檔案進行編譯。

跟 Loader 不同的是,我們要在原本 module 這個 Property 下面加入一個 Plugins 的 Property,告訴 Webpack 我們要使用 Plugin。這個 Property 會是一個陣列,而裡面我們初始化一個 Plugin 的物件,並且在 Argument 的地方置入檔名,這個檔名就是輸出 CSS 檔案的名稱。

接著讓我們執行 npm run build 來重新跑一次 Webpack,這次你應該可以看到輸出的結果有一筆 styles.css 的檔案被輸出到 build 資料夾裡面。你如果打開你的首頁,會發現裡面的 stylesheet 都不見了,而原本的置中的圖片也跑回左上的位置。

因為我們現在把 stylesheet 抽出來,所以要記得手動加入 HTML 裡面。在 index.html 裡面的中加入 <link rel="stylesheet" href="build/styles.css"/>,我們的 style 就回來囉!

Loader vs Plugin?

有人可能會問,Loader 跟 Plugin 的差別到底在哪呢?兩者的界線感覺相當模糊。簡單來說,Loader 跟 Plugin 所作用的時間不一樣,基本上 Plugin 的作用時間會是在 Webpack 編譯之前、或者編譯完成之後,而 Loader 則是 Webpack 編譯時與 Webpack 一起協作。在這個例子裡面,我們就是等到 Webpack 編譯檔案完成之後,再將其中的 CSS 抽出來輸出成一個檔案。

點選查看此章原始碼

此分享轉載自五倍 Rails 工程師 Roy Huang 的開發筆記

«回文章列表