上一節(jié)講到如何使用Webpack實(shí)現(xiàn)最基礎(chǔ)的打包功能，但是發(fā)現(xiàn)以下幾個(gè)比較突出的問題：

① 我們只打包了一個(gè)JS文件，多個(gè)文件該如何打包？
② CSS樣式該如何打包？
③ 每次寫完代碼想要看運(yùn)行結(jié)果都需要手動(dòng)輸命令打包，反而降低了開發(fā)效率

沒關(guān)系，本文就是為解決這些問題而來的。繼續(xù)上節(jié)實(shí)例，開始吧！

一、JS模塊化

使用Webpack成功打包多個(gè)JS文件最核心的一點(diǎn)就是使用模塊化的開發(fā)方式，而Webpack支持CommonJS和ES6兩種模塊化規(guī)范，其中有關(guān)CommonJS的語法可以看我之前的一篇文章→JavaScript模塊化編程規(guī)范。本文也將以CommonJS規(guī)范來講解Webpack中的JS模塊化。

我們?cè)趕cripts目錄下添加一個(gè)module.js文件，目錄結(jié)構(gòu)如下：

并寫入以下代碼：

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

module.exports = {   // CommonJS規(guī)范中模塊輸出語法
    text: text
};

然后在index.js中引入module.js文件：

// index.js
var module = require('./module.js');   // CommonJS規(guī)范中模塊引入語法

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

由于我們?cè)谏弦还?jié)中已經(jīng)對(duì)Webpack的打包入口和輸出路徑進(jìn)行了基本配置，所以我們只需同樣執(zhí)行npx webpack命令即可將兩個(gè)JS文件進(jìn)行打包輸出到dist目錄。

小貼士： 有時(shí)輸入的命令比較長(zhǎng)，我們可以將其寫入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"
  }
}

接著我們只需執(zhí)行npm run start命令即可（或直接輸入npm start）。

二、打包CSS樣式

1. loader簡(jiǎn)介

由于Webpack打包入口目前只配置了一個(gè)index.js文件，那么其他需要被打包的文件都必須通過模塊化方式引入該文件才行，而默認(rèn)情況下，引入的文件必須是js文件（如上面添加的module.js）。

那么其他文件類型該如何進(jìn)行打包呢？

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

其中CSS文件的打包需要用到css-loader和style-loader兩個(gè)loader，css-loader只是用于加載css文件（并沒有添加到頁(yè)面），而style-loader則是將打包后的css代碼以<style>標(biāo)簽形式添加到頁(yè)面頭部。

2. 安裝loader

輸入命令npm i -D css-loader style-loader同時(shí)安裝這兩個(gè)loader，安裝結(jié)束后再在webpack.config.js文件中配置相應(yīng)的loader，具體配置如下：

// webpack.config.js
module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {   
        path: __dirname + '/dist',   // 輸出路徑
        filename: 'scripts/index.js'    //  輸出文件名
    },
    module: {
        rules: [  
            {
                test: /\.css$/,   // 正則表達(dá)式，表示.css后綴的文件
                use: ['style-loader','css-loader']   // 針對(duì)css文件使用的loader，注意有先后順序，數(shù)組項(xiàng)越靠后越先執(zhí)行
            }
        ]
    }
};

3. 開始打包

在css目錄下新建一個(gè)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頁(yè)面后，你會(huì)發(fā)現(xiàn)除了彈出之前的“Hello Webpack!”外，頁(yè)面背景顏色也變?yōu)榧t色，說明樣式也已經(jīng)打包成功。

三、自動(dòng)化打包

通過上面的講解你會(huì)發(fā)現(xiàn)，雖然我們已經(jīng)將命令改成了npm start，然而實(shí)際操作上還是得每次手動(dòng)輸入命令打包，不開心。

我們能不能像以前不用Webpack時(shí)那樣，寫完了直接刷新頁(yè)面就能看到效果呢？

答案當(dāng)然是可以的，我們只需在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   // 監(jiān)聽修改自動(dòng)打包
};

本文重點(diǎn)總結(jié)

① 打包多個(gè)文件為一個(gè)文件，必須使用模塊化開發(fā)方式
② 先后使用css-loader和style-loader可以打包CSS樣式并添加至頁(yè)面
③ 想要自動(dòng)化打包，只需在webpack.config.js文件中添加watch: true