上一篇文章中,我們提到如何使用 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。

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 裡面囉。

點選查看原始碼