新手向 Webpack 完全攻略 (5) – 幫你載入 CSS

By Roy Huang・Jun 12 2017・技術文章

在[上一篇文章]中(https://roy-huang.com/2017/04/15/%E6%96%B0%E6%89%8B%E5%90%91-webpack-%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5-4-%E8%A8%AD%E5%AE%9A-loader/)，我們提到如何使用 Loader 來將 ES6 的語法改成 ES5 ，以方便讓各種瀏覽器都能夠順利讀取 JS 檔案。但 Loader 能做的，並不只是處理 JavaScript。在這個章節我們要加入一些新的內容，並且讓 Loader 來幫我們處理 CSS。

為了展示 CSS 是否要被正確編譯，我們要做一些事前準備工作。我們可以讓畫面中可以輸出一張圖片，並且利用 CSS 來調整圖片的位置。

新增圖片及 CSS

我們先在 ./src 裡面新增一個檔案叫做 image_viewer.js，這個檔案讓我們可以加入一張圖片到頁面上。

const imageViewer = () => {
  let img = document.createElement('img');
  img.src = 'http://lorempixel.com/400/400';
  document.body.appendChild(img);
}

export default imageViewer;

如果你不是很懂 JavaScript，讓我來解釋一下。我們首先先定義一個叫做 imageViewer() 的函式（這是 ES6 所使用的箭頭函式），然後我們用 createElement() 這個函式來創造一個 img 的元件，並且將它的 src 值定義成一個網址。lorempixel.com 是一個線上的服務，它會隨機回傳一張圖片，後面的數字則是代表圖片的大小。而在函式的最後，我們則是將這張圖片加入到 <body> Tag 裡面。

而為了讓我們的 index.js 可以存取到這個函式，我們必須將它 export。這麼一來，我們就有一個可以讀出圖片的函式了，讓我們來試試看吧。我們可以把原本 index.js 的內容都刪除，換成我們最新的版本。

import imageViewer from './image_viewer'

imageViewer();

利用我們輸入的 imageViewer() 這個函式，現在打開 index.html，應該可以發現頁面的左上角有一張圖片出現了！（當然，別忘了執行一次 npm run build 來更新你的 bundle.js）接著呢，我想要做的事情是把這張圖片置中，我們可以簡單地用 CSS 來完成這件事情。

首先，我們在 ./src 裡面再建立一個檔案叫做 style.css，接著加入簡單的 style:

body {
  text-align: center;
}

接著非常簡單，我們只要在 index.js 裡面 import 這份 CSS 就好了。

import imageViewer from './image_viewer';
import './style.css';

imageViewer();

值得注意的是，假如我們 import 的檔案不是 JavaScript，我們必須要標明它的副檔名喔！只有 import './style' 是不行的！

安裝 Loaders

接著就是要來安裝 Loader 了！每個 Loader 都會有各種不同的用途，而我們要用來處理 CSS 的 Loader 有兩個，一個是 css-loader ，而另一個則是 style-loader。

執行指令安裝 Package： npm install -D css-loader style-loader

css-loader 就是讓 Webpack 有能力來處理 CSS 的 Loader，而 style-loader 則是會將處理後的 CSS 套用到你的頁面。安裝完 Loader 之後還必須調整一下我們的 Webpack 設定。在 rules 陣列裡面，我們要告訴 Wepback 我們還要套用別的 Loader。

// wepack.config.js
rules: [
    //... original setting
  {
    use: ["style-loader", "css-loader"],
    test: /\.css$/
  }
]

這裡的設定應該不陌生，我們告訴 Webpack，每一個結尾為 .css 的檔案都要用 css-loader 以及 style-loader 來編譯。但是這邊有一個重點，Loader 的讀取順序是從陣列最後的開始，所以順序很重要。我們必須先用 css-loader 來編譯 CSS、再用 style-loader 套入頁面。

設定完之後，讓我們利用 npm run build 重新產生 bundle.js，再打開你的 index.html。Ta-Da! 你應該可以看到圖片的位置已經被置中了。假如你瀏覽網站的原始碼，也可以看見我們剛剛寫的 CSS 被插入在 <head> Tag 裡面囉。

點選查看此章原始碼

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

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

新手向 Webpack 完全攻略 (4) – 設定 Loader