WordPress

利用 loader 完善 Webpack 編譯 CSS

內容目錄

Toggle

上一篇中我們已經將 Webpack 載入我們的 WordPress 佈景主題，但目前我們可以實現的功能只有將 JavaScript 的檔案從 src 資料夾編譯至 dist 資料夾，說起來實在是算不上有提升工程師的生產力，作為一個「打包工具」應該要可以做到更多功能吧？這一篇我們就來談談Webpack 怎麼利用 loader 編譯 CSS 以及如何打包 Sass 檔案。

什麼是 loader？它可做到什麼？

Webpack 作為一個 javaScript 的編譯工具，其實是看不懂 JS 以外的檔案，所以如果我們要請它編譯 CSS 、 Sass 或是圖片等等的檔案，我們就會需要 loader 這一個 Webpack 的模組讓它有辦法讀取這些檔案然後我們就可以加工將這些檔案編譯成我們要的樣子，接下來我們就以編譯 CSS 來示範 loader 是怎麼運作的

使用 CSS-loader

首先我們介紹怎麼使用 css-loader 讓 Webpack 看得懂 CSS 檔，我們先在我們的專案資料夾下使用終端機輸入以下指令

安裝好之後我們回到 webpack.config.js 裡面設定我們的 loader 我們先在最一開始打入

接下來我們在屬性 outout 下面繼續打入這些程式碼

完成之後我們回到上次已經建立好的 src 資料夾裡面新增一個 CSS 檔案 main.css 並在裡面隨意輸入一段 CSS

接下來回到 ./src/index.js 輸入下令程式碼

這個時候回到終端機並且使用 npm run build 就會看到 dist 的資料夾裡面新增了一個 main.css 的 CSS 檔案，這樣就代表我們已經成功的使用 css-loader 的方式編譯我們的 CSS 檔。

現在我們來看看我們到底做了些什麼

安裝 css-loader 以及 mini-css-extract-plugin
設定 webpack.config.js
新增 main.css 並在 index.js 裏面匯入

首先 css-loader 我已在文章開頭已經解釋過了，但是什麼是 mini-css-extract-plugin？它是一個 Webpack 的插件，他的作用是把 Webpack 已經讀取到的 css 獨立製作成一隻 css 檔案因為 css-loader 只能夠讓 Webpack 讀取但是不能編譯，所以我們需要一個插件來完成這件事情。

再來是關於 webpack.config.js 的設定，當我們基本的插件都備齊了，我們就要進入 webpack.config.js 跟 Webpack 説如果你遇到了關於 CSS 的檔案，你要怎麼做。

這邊一開始有兩件事情，第一、 loader 是 webpack 的新增的模組，所以安裝之後就可以直接使用；第二、mini-css-extract-plugin 是插件，所以我們必須要先載入才可以使用，所以我們必須要在檔案一開始打入

讓 Webpack 載入這個插件。

接下來我們來看看在 module 裡面的 rules 設定

test 這個是告訴 Webpack 一個規則，就是如果遇到副檔名為 .css 的檔案都要進行處理而這邊要使用的是正規表達式。
use 這個是告訴 Webpack 遇到了 CSS 檔案的話用什麼 loader 或是插件進行處理，這邊要特別注意的是使用的 loader 以及插件是有順序而在編譯 CSS 的過程中要先使用 mini-css-extract-plugin 再使用 css-loader。

在設定的最後，我們要把載入的 mini-css-extract-plugin 開啟，所以我們要在 module 後面加上 plugins 並在後面加上 new MiniCssExtractPlugin( {} ) 。

最後我們只要把 CSS 檔放入我們的 index.js 就大功告成。