新手向 Webpack 完全攻略 (6) – 乾淨俐落抽出 CSS
在上一個章節中，我們提到了要如何設定 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 的開發筆記