Webpack輕松入門（二）——CSS打包

上一節

講到如何使用Webpack實作最基礎的打包功能，但是發現以下幾個比較突出的問題：

① 我們隻打包了一個JS檔案，多個檔案該如何打包？

② CSS樣式該如何打包？

③ 每次寫完代碼想要看運作結果都需要手動輸指令打包，反而降低了開發效率

沒關系，本文就是為解決這些問題而來的。繼續上節執行個體，開始吧！

一、JS子產品化

使用Webpack成功打包多個JS檔案最核心的一點就是使用子產品化的開發方式，而Webpack支援CommonJS和ES6兩種子產品化規範，其中有關CommonJS的文法可以看我之前的一篇文章→

JavaScript子產品化程式設計規範

。本文也将以CommonJS規範來講解Webpack中的JS子產品化。

我們在scripts目錄下添加一個module.js檔案，目錄結構如下：

并寫入以下代碼：

// module.js
var text = 'Hello Webpack!';

module.exports = {   // CommonJS規範中子產品輸出文法
    text: text
};
           

然後在index.js中引入module.js檔案：

// index.js
var module = require('./module.js');   // CommonJS規範中子產品引入文法

alert(module.text);   // 打包後同樣輸出“Hello Webpack!”
           

由于我們在上一節中已經對Webpack的打包入口和輸出路徑進行了基本配置，是以我們隻需同樣執行

npx webpack

指令即可将兩個JS檔案進行打包輸出到dist目錄。

小貼士： 有時輸入的指令比較長，我們可以将其寫入package.json檔案的

"scripts"

屬性中。

改寫後的package.json如下：

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"   
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}
           

接着我們隻需執行

npm run start

指令即可（或直接輸入

npm start

）。

二、打包CSS樣式

1. loader簡介

由于Webpack打包入口目前隻配置了一個index.js檔案，那麼其他需要被打包的檔案都必須通過子產品化方式引入該檔案才行，而預設情況下，引入的檔案必須是js檔案（如上面添加的module.js）。

那麼其他檔案類型該如何進行打包呢？

這時我們就要用到Webpack中所提供的各種loader，它就是專門用于處理除JS檔案之外的其他格式檔案的編譯、提取、合并、打包等工作的。

其中CSS檔案的打包需要用到css-loader和style-loader兩個loader，css-loader隻是用于加載css檔案（并沒有添加到頁面），而style-loader則是将打包後的css代碼以<style>标簽形式添加到頁面頭部。

2. 安裝loader

輸入指令

npm i -D css-loader style-loader

同時安裝這兩個loader，安裝結束後再在webpack.config.js檔案中配置相應的loader，具體配置如下：

// webpack.config.js
module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {   
        path: __dirname + '/dist',   // 輸出路徑
        filename: 'scripts/index.js'    //  輸出檔案名
    },
    module: {
        rules: [  
            {
                test: /\.css$/,   // 正規表達式，表示.css字尾的檔案
                use: ['style-loader','css-loader']   // 針對css檔案使用的loader，注意有先後順序，數組項越靠後越先執行
            }
        ]
    }
};
           

3. 開始打包

在css目錄下建立一個style.css檔案，并寫入樣式：

/* style.css */
html{ background: #f00;}
           

然後在index.js中引入該檔案：

// index.js
var module = require('./module.js');
require('../css/style.css');   // 引入css樣式

alert(module.text);
           

最後輸入指令

npm start

，打包完成後打開index.html頁面後，你會發現除了彈出之前的“Hello Webpack!”外，頁面背景顔色也變為紅色，說明樣式也已經打包成功。

三、自動化打包

通過上面的講解你會發現，雖然我們已經将指令改成了

npm start

，然而實際操作上還是得每次手動輸入指令打包，不開心。

我們能不能像以前不用Webpack時那樣，寫完了直接重新整理頁面就能看到效果呢？

答案當然是可以的，我們隻需在webpack.config.js中添加

watch: true

就好。

module.exports = {
    entry: './src/scripts/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'scripts/index.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    watch: true   // 監聽修改自動打包
};
           

本文重點總結

① 打包多個檔案為一個檔案，必須使用子產品化開發方式

② 先後使用css-loader和style-loader可以打包CSS樣式并添加至頁面

③ 想要自動化打包，隻需在webpack.config.js檔案中添加watch: true