上一節(jié)講到如何使用Webpack實現最基礎的打包功能，但是發(fā)現以下幾個比較突出的問題：
① 我們只打包了一個JS文件赤兴，多個文件該如何打包横漏？
② CSS樣式該如何打包抠艾？
③ 每次寫完代碼想要看運行結果都需要手動輸命令打包纫塌，反而降低了開發(fā)效率
沒關系诊县，本文就是為解決這些問題而來的。繼續(xù)上節(jié)實例措左，開始吧依痊！
一、JS模塊化
使用Webpack成功打包多個JS文件最核心的一點就是使用模塊化的開發(fā)方式媳荒，而Webpack支持CommonJS和ES6兩種模塊化規(guī)范抗悍，其中有關CommonJS的語法可以看我之前的一篇文章→JavaScript模塊化編程規(guī)范。本文也將以CommonJS規(guī)范來講解Webpack中的JS模塊化钳枕。
我們在scripts目錄下添加一個module.js文件缴渊，目錄結構如下：
并寫入以下代碼：
// 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!”
由于我們在上一節(jié)中已經對Webpack的打包入口和輸出路徑進行了基本配置，所以我們只需同樣執(zhí)行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"
}
}
接著我們只需執(zhí)行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蛙埂，注意有先后順序辨液，數組項越靠后越先執(zhí)行
}
]
}
};
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頁面后滔迈，你會發(fā)現除了彈出之前的“Hello Webpack!”外止吁，頁面背景顏色也變?yōu)榧t色，說明樣式也已經打包成功燎悍。
三敬惦、自動化打包
通過上面的講解你會發(fā)現，雖然我們已經將命令改成了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 // 監(jiān)聽修改自動打包
};
本文重點總結
① 打包多個文件為一個文件斜脂，必須使用模塊化開發(fā)方式
② 先后使用css-loader和style-loader可以打包CSS樣式并添加至頁面
③ 想要自動化打包，只需在webpack.config.js文件中添加watch: true
