一菇绵、Webpack簡(jiǎn)介
1. 核心
① 入口(entry)
② 輸出(output)
③ loader
④ 插件(plugins)
2. 優(yōu)勢(shì)
① 模塊化開(kāi)發(fā)（import，require）
② 預(yù)處理（Less商模，Sass帆疟，ES6轻要，TypeScript……）
③ 主流框架腳手架支持（Vue，React旱爆，Angular）
④ 龐大的社區(qū)（資源豐富舀射，降低學(xué)習(xí)成本）
詳情請(qǐng)戳→我為什么要使用Webpack?
3. 初學(xué)者誤區(qū)
① 要學(xué)會(huì)node.js
② 只能用于簡(jiǎn)單的代碼壓縮合并
③ 上線(xiàn)時(shí)要將整個(gè)項(xiàng)目文件上傳服務(wù)器
以上幾條都是初學(xué)者比較容易產(chǎn)生的誤區(qū)，而事實(shí)上……
① 我們確實(shí)需要安裝node.js怀伦，但基本只是需要它提供的環(huán)境及npm而已脆烟，你不一定要掌握node.js語(yǔ)法
② Webpack非常強(qiáng)大，不僅僅可以實(shí)現(xiàn)代碼的壓縮合并房待，還能進(jìn)行一些預(yù)編譯處理以及模塊化開(kāi)發(fā)等
③ 我們只需要將Webpack打包出來(lái)的文件目錄上傳到服務(wù)器即可邢羔，而不是上傳整個(gè)項(xiàng)目文件
二、準(zhǔn)備工作
1. 安裝node.js
2. 新建項(xiàng)目
① 創(chuàng)建目錄結(jié)構(gòu)
在新創(chuàng)建的項(xiàng)目文件夾下桑孩，創(chuàng)建兩個(gè)基礎(chǔ)文件夾：src和dist拜鹤，其中src是我們開(kāi)發(fā)時(shí)源代碼所放置的文件夾，dist是我們使用Webpack打包后代碼輸出的目標(biāo)文件夾流椒，也就是說(shuō)最終我們上傳服務(wù)器的代碼都是從dist文件夾下獲取敏簿。目錄結(jié)構(gòu)大致如下：
② 新建一個(gè)package.json文件
package.json文件是在node.js環(huán)境下開(kāi)發(fā)項(xiàng)目必須要使用到的文件，該文件主要用于配置項(xiàng)目入口宣虾、腳本和項(xiàng)目所需安裝的依賴(lài)等等惯裕。我們可以自己手動(dòng)創(chuàng)建，也可以通過(guò)命令行自動(dòng)創(chuàng)建它绣硝。命令行創(chuàng)建很簡(jiǎn)單蜻势，直接在控制臺(tái)終端輸入npm init，然后一直回車(chē)即可輕松創(chuàng)建一個(gè)最基礎(chǔ)的package.json文件鹉胖。
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
小貼士： 建議使用開(kāi)發(fā)工具中自帶的控制臺(tái)終端握玛，非常方便，自動(dòng)定位當(dāng)前項(xiàng)目文件夾甫菠，無(wú)需手動(dòng)切換败许。比如我使用的開(kāi)發(fā)工具是WebStorm，控制臺(tái)終端如下圖：
3. 安裝Webpack
依次輸入命令行npm i -D webpack和npm i -D webpack-cli回車(chē)進(jìn)行本地安裝淑蔚，其中i是install的縮寫(xiě)，-D是--save-dev的縮寫(xiě)愕撰，也就是說(shuō)這兩個(gè)命令行也可以寫(xiě)成npm install --save-dev webpack和npm install --save-dev webpack-cli刹衫。
安裝后的目錄結(jié)構(gòu)如下：
package.json文件如下：
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}
4. 新建webpack.config.js文件
該文件是Webpack的配置文件醋寝，也是項(xiàng)目運(yùn)行的入口文件，基礎(chǔ)寫(xiě)法如下：
module.exports = {
entry: './src/scripts/index.js', // 需要被打包的js文件路徑及文件名
output: {
path: __dirname + '/dist', // 打包輸出的目標(biāo)文件的絕對(duì)路徑（其中__dirname為當(dāng)前目錄的絕對(duì)路徑）
filename: 'scripts/index.js' // 打包輸出的js文件名及相對(duì)于dist目錄所在路徑
}
};
三带迟、開(kāi)始打包
1. 新建需要被打包的js文件
我們給這個(gè)index.js文件寫(xiě)入點(diǎn)代碼：
//index.js
alert('Hello Webpack!');
2. 開(kāi)始打包
輸入命令行：
npx webpack音羞，回車(chē)。
由于我們已經(jīng)在webpack.config.js文件配置了打包的相關(guān)路徑及文件名仓犬，所以最終打包后我們就可以在dist目錄下看到我們想要的輸出結(jié)果嗅绰，打包后整體目錄結(jié)構(gòu)如下：
3. 使用打包后的js代碼
現(xiàn)在我們已經(jīng)獲得打包后的代碼，接下來(lái)我們應(yīng)該使用它搀继，測(cè)試它是否能正常運(yùn)行窘面。
我們可以在dist目錄下手動(dòng)創(chuàng)建一個(gè)HTML文件，并引入這個(gè)已經(jīng)打包成功的js文件叽躯。目錄結(jié)構(gòu)及HTML代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="scripts/index.js"></script>
</body>
</html>
打開(kāi)這個(gè)index.html頁(yè)面后财边，我們發(fā)現(xiàn)瀏覽器彈出“Hello Webpack!”提示框，說(shuō)明代碼確實(shí)已經(jīng)打包成功点骑。
本文重點(diǎn)總結(jié)：
成功運(yùn)行Webpack基本流程如下：
① 安裝node.js
② 創(chuàng)建項(xiàng)目目錄和新建package.json
③ 安裝webpack和webpack-cli
④ 新建webpack.config.js
⑤ 開(kāi)始打包你的js代碼
<meta charset="utf-8">
二酣难，打包c(diǎn)ss：
上一節(jié)講到如何使用Webpack實(shí)現(xiàn)最基礎(chǔ)的打包功能，但是發(fā)現(xiàn)以下幾個(gè)比較突出的問(wèn)題：
① 我們只打包了一個(gè)JS文件黑滴，多個(gè)文件該如何打包憨募？
② CSS樣式該如何打包？
③ 每次寫(xiě)完代碼想要看運(yùn)行結(jié)果都需要手動(dòng)輸命令打包袁辈，反而降低了開(kāi)發(fā)效率
沒(méi)關(guān)系菜谣，本文就是為解決這些問(wèn)題而來(lái)的。繼續(xù)上節(jié)實(shí)例吵瞻，開(kāi)始吧葛菇！
一、JS模塊化
使用Webpack成功打包多個(gè)JS文件最核心的一點(diǎn)就是使用模塊化的開(kāi)發(fā)方式橡羞，而Webpack支持CommonJS和ES6兩種模塊化規(guī)范眯停，其中有關(guān)CommonJS的語(yǔ)法可以看我之前的一篇文章→JavaScript模塊化編程規(guī)范。本文也將以CommonJS規(guī)范來(lái)講解Webpack中的JS模塊化卿泽。
我們?cè)趕cripts目錄下添加一個(gè)module.js文件莺债，目錄結(jié)構(gòu)如下：
并寫(xiě)入以下代碼：
// module.js
var text = 'Hello Webpack!';
module.exports = { // CommonJS規(guī)范中模塊輸出語(yǔ)法
text: text
};
然后在index.js中引入module.js文件：
// index.js
var module = require('./module.js'); // CommonJS規(guī)范中模塊引入語(yǔ)法
alert(module.text); // 打包后同樣輸出“Hello Webpack!”
由于我們?cè)谏弦还?jié)中已經(jīng)對(duì)Webpack的打包入口和輸出路徑進(jìn)行了基本配置，所以我們只需同樣執(zhí)行npx webpack命令即可將兩個(gè)JS文件進(jìn)行打包輸出到dist目錄签夭。
小貼士： 有時(shí)輸入的命令比較長(zhǎng)齐邦，我們可以將其寫(xiě)入package.json文件的
"scripts"屬性中。
改寫(xiě)后的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文件，那么其他需要被打包的文件都必須通過(guò)模塊化方式引入該文件才行慎宾，而默認(rèn)情況下丐吓，引入的文件必須是js文件（如上面添加的module.js）浅悉。
那么其他文件類(lèi)型該如何進(jìn)行打包呢？
這時(shí)我們就要用到Webpack中所提供的各種loader券犁，它就是專(zhuān)門(mén)用于處理除JS文件之外的其他格式文件的編譯术健、提取、合并粘衬、打包等工作的荞估。
其中CSS文件的打包需要用到css-loader和style-loader兩個(gè)loader，css-loader只是用于加載css文件（并沒(méi)有添加到頁(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. 開(kāi)始打包
在css目錄下新建一個(gè)style.css文件冒掌，并寫(xiě)入樣式：
/* style.css */
html{ background: #f00;}
然后在index.js中引入該文件：
// index.js
var module = require('./module.js');
require('../css/style.css'); // 引入css樣式
alert(module.text);
最后輸入命令npm start，打包完成后打開(kāi)index.html頁(yè)面后蹲盘，你會(huì)發(fā)現(xiàn)除了彈出之前的“Hello Webpack!”外股毫，頁(yè)面背景顏色也變?yōu)榧t色，說(shuō)明樣式也已經(jīng)打包成功召衔。
三铃诬、自動(dòng)化打包
通過(guò)上面的講解你會(huì)發(fā)現(xiàn)，雖然我們已經(jīng)將命令改成了npm start苍凛，然而實(shí)際操作上還是得每次手動(dòng)輸入命令打包趣席，不開(kāi)心。
我們能不能像以前不用Webpack時(shí)那樣醇蝴，寫(xiě)完了直接刷新頁(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)聽(tīng)修改自動(dòng)打包
};
本文重點(diǎn)總結(jié)
① 打包多個(gè)文件為一個(gè)文件霉涨，必須使用模塊化開(kāi)發(fā)方式
② 先后使用css-loader和style-loader可以打包CSS樣式并添加至頁(yè)面
③ 想要自動(dòng)化打包，只需在webpack.config.js文件中添加watch: true
打包圖片
上一節(jié)我們講到如何使用css-loader和style-loader兩個(gè)loader來(lái)打包CSS代碼惭适，這次我將繼續(xù)講解如何使用loader將圖片類(lèi)型文件進(jìn)行打包處理笙瑟。
一、上節(jié)回顧
為了讓大家思路更加明朗癞志，我還是先將上一節(jié)結(jié)束時(shí)的目錄結(jié)構(gòu)和一些關(guān)鍵文件內(nèi)容展示一下吧往枷。
webpack.config.js：
module.exports = {
entry: './src/scripts/index.js', // 打包入口
output: {
path: __dirname + '/dist', // 輸出路徑
filename: 'scripts/index.js' // 輸出文件名
},
module: {
rules: [ // 其中包含各種loader的使用規(guī)則
{
test: /\.css$/, // 正則表達(dá)式，表示打包.css后綴的文件
use: ['style-loader','css-loader'] // 針對(duì)css文件使用的loader，注意有先后順序错洁，數(shù)組項(xiàng)越靠后越先執(zhí)行
}
]
},
watch: true // 監(jiān)聽(tīng)文件改動(dòng)并自動(dòng)打包
};
index.js：
var module = require('./module.js');
require('../css/style.css');
二茅信、圖片打包
圖片打包關(guān)鍵要用到file-loader或url-loader，其中url-loader與file-loader功能基本一致墓臭，只不過(guò)url-loader能將小于某個(gè)大小的圖片進(jìn)行base64格式的轉(zhuǎn)化處理。
1. CSS中的圖片
比如妖谴，我現(xiàn)在在src目錄下新增一個(gè)images文件夾窿锉，再在images中添加一張圖片“1.jpg”。然后我在style.css中添加以下代碼：
html{ height: 100%; background: url("../images/1.jpg") no-repeat center;}
如果這時(shí)直接進(jìn)行打包膝舅，那么肯定會(huì)報(bào)錯(cuò)嗡载，比如像這樣的：
第三行它提示你需要使用一個(gè)loader來(lái)處理圖片這種類(lèi)型的文件，這時(shí)仍稀，我們只需把file-loader裝上洼滚，并在webpack.config.js中添加相應(yīng)配置就ok了。
① 輸入命令安裝file-loader
npm i -D file-loader
② 在webpack.config.js中的rules數(shù)組中添加file-loader的相關(guān)配置
{
test: /\.(png|jpg|gif|svg)$/,
use: ['file-loader']
}
其實(shí)對(duì)于只有單個(gè)loader的技潘，我們還可以將其簡(jiǎn)化成下面這樣：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader'
}
接下來(lái)遥巴，我們只需執(zhí)行npm start命令進(jìn)行打包即可。
雖然我們已經(jīng)將圖片但是打包后享幽，我們會(huì)發(fā)現(xiàn)打包后的圖片名發(fā)生了變化：
那么如何才能保持圖片名不變铲掐，而且也能夠添加到指定目錄下呢？
我們只需要再添加一個(gè)options屬性即可：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
}
其中name屬性其實(shí)就是圖片打包后的路徑值桩，其中包括圖片名（[name]）和圖片格式（[ext]）摆霉。
此時(shí)打包后的dist目錄結(jié)構(gòu)如下：
2. JS中的圖片
file-loader能自動(dòng)識(shí)別CSS代碼中的圖片路徑并將其打包至指定目錄，但是JS就不同了奔坟，我們來(lái)看下面的例子携栋。
// index.js
var img = new Image();
img.src = '../images/1.jpg';
document.body.appendChild(img);
如果不使用Webpack打包，正常情況下只要路徑正確圖片是能夠正常顯示的咳秉。然而婉支，當(dāng)使用Webpack打包后，我們會(huì)發(fā)現(xiàn)圖片并未被成功打包到dist目錄滴某，自然圖片也無(wú)法顯示出來(lái)磅摹。
這其實(shí)是因?yàn)閃ebpack并不知道'../images/1.jpg'是一張圖片，如果要正常打包的話(huà)需要先將圖片資源加載進(jìn)來(lái)霎奢，然后再將其作為圖片路徑添加至圖片對(duì)象户誓。具體代碼如下：
// index.js
var imgSrc = require('../images/1.jpg');
var img = new Image();
img.src = imgSrc;
document.body.appendChild(img);
3. 淺談url-loader
除了使用file-loader對(duì)圖片進(jìn)行打包處理外，我們同樣也可以使用url-loader代替幕侠，另外我們還可以對(duì)小于某個(gè)大小的圖片進(jìn)行base64格式的轉(zhuǎn)化處理帝美。
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: './images/[name].[ext]',
limit: 8192
}
}
這里limit屬性的作用就是將小于8192B（8.192K）大小的圖片轉(zhuǎn)成base64格式，而大于這個(gè)大小的圖片將會(huì)以file-loader的方式進(jìn)行打包處理晤硕，例如：
當(dāng)然悼潭，如果不寫(xiě)limit屬性庇忌，那么url-loader就會(huì)默認(rèn)將所有圖片轉(zhuǎn)成base64。
小貼士: 當(dāng)我們配置watch為true進(jìn)行打包后舰褪，Webpack會(huì)一直處于監(jiān)聽(tīng)狀態(tài)皆疹，然而當(dāng)更改webpack.config.js后我們?nèi)孕枰匦逻M(jìn)行打包操作，這時(shí)我們只需在控制臺(tái)簡(jiǎn)單的按下Ctrl+C后根據(jù)提示輸入字母y回車(chē)確定即可成功退出監(jiān)聽(tīng)狀態(tài)占拍。
本文重點(diǎn)總結(jié)
① 使用file-loader或url-loader可對(duì)圖片進(jìn)行打包操作
② url-loader可將圖片轉(zhuǎn)成base64格式
打包html
到目前為止略就，有關(guān)Webpack最基礎(chǔ)的內(nèi)容差不多已經(jīng)講完了，其中包括Webpack運(yùn)行的基本流程晃酒、CSS的打包和圖片的打包表牢，也就是說(shuō)，當(dāng)你掌握這幾節(jié)之后贝次，基本上就能像以前不用Webpack時(shí)一樣愉快地寫(xiě)代碼了崔兴。
當(dāng)然，我們其實(shí)還有很多需要優(yōu)化的地方蛔翅，就比如本文所要講到的敲茄，如何將HTML進(jìn)行打包？
在之前的實(shí)例中搁宾，Webpack雖然能夠正常地將各種頁(yè)面所需要的資源從src目錄打包至dist目錄折汞，但是我們?cè)谧詈蟊仨氃赿ist目錄中手動(dòng)去創(chuàng)建HTML頁(yè)面，并引入這些打包后的資源盖腿。
事實(shí)上爽待，Webpack能夠自動(dòng)的幫助我們完成這件事，只需要使用html-webpack-plugin插件即可翩腐。
1. 安裝html-webpack-plugin插件
與安裝loader一樣鸟款，命令行輸入以下命令回車(chē)即可。
npm i -D html-webpack-plugin
2. webpack.config.js中添加相關(guān)配置
const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin插件
module.exports = {
entry: './src/scripts/index.js', // 打包入口
output: {
path: __dirname + '/dist', // 輸出路徑
filename: 'scripts/index.js' // 輸出文件名
},
module: {
rules: [ // 其中包含各種loader的使用規(guī)則
{
test: /\.css$/, // 正則表達(dá)式茂卦，表示打包.css后綴的文件
use: ['style-loader','css-loader'] // 針對(duì)css文件使用的loader何什，注意有先后順序，數(shù)組項(xiàng)越靠后越先執(zhí)行
},
{ // 圖片打包
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: './images/[name].[ext]',
limit: 8192
}
}
]
},
plugins: [ // 打包需要的各種插件
new htmlWebpackPlugin({ // 打包HTML
template: './src/index.html' // HTML模板路徑
})
],
watch: true // 監(jiān)聽(tīng)文件改動(dòng)并自動(dòng)打包
};
3. 添加HTML模板文件
HTML模板文件如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello Webpack</title>
</head>
<body>
</body>
</html>
是的等龙，除了HTML本身处渣，其他資源如CSS、圖片等均無(wú)需手動(dòng)添加蛛砰，在打包結(jié)束后罐栈，所有資源均會(huì)自動(dòng)添加至HTML文件相應(yīng)位置并進(jìn)入dist目錄。
4. 打包結(jié)束
打包后的index.html文件如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello Webpack</title>
</head>
<body>
<script type="text/javascript" src="scripts/index.js"></script></body>
</html>
本文重點(diǎn)總結(jié)
打包HTML泥畅，使用 html-webpack-plugin 插件即可
自動(dòng)更新
Webpack中的自動(dòng)打包功能荠诬，很簡(jiǎn)單，在webpack.config.js中添加 watch: true 配置，打包一次之后每次代碼更新后都會(huì)自動(dòng)進(jìn)行打包而無(wú)需重復(fù)輸入命令行柑贞。
當(dāng)然方椎，我們也可以直接給package.json中的scripts添加相關(guān)配置，而無(wú)需更改webpack.config.js钧嘶。
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack --watch"
}
換句話(huà)說(shuō)棠众，package.json中的webpack --watch與webpack.config.js中的watch: true效果相同。
實(shí)際上有决，Webpack還提供了一個(gè)比watch更方便的功能摄欲，它不僅可以實(shí)現(xiàn)自動(dòng)打包，還具有自動(dòng)打開(kāi)瀏覽器和自動(dòng)刷新頁(yè)面的功能疮薇，可以說(shuō)給我們這幫懶人服務(wù)到了極致，哈哈我注。
下面我們就來(lái)看看具體如何實(shí)現(xiàn)這樣的功能按咒。
安裝webpack-dev-server
npm i -D webpack-dev-serverpackage.json中的scripts添加相關(guān)配置
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack",
"dev": "webpack-dev-server --open"
}
其中 --open 就代表打開(kāi)默認(rèn)瀏覽器。輸入命令行進(jìn)行打包
npm run dev
打包結(jié)束后你會(huì)發(fā)現(xiàn)瀏覽器自動(dòng)打開(kāi)但骨，并且正確顯示打包后的頁(yè)面励七。更改任意代碼
我們可以試著在index.js中添加以下代碼：
var module = require('./module.js');
alert(module.text);
module.js：
var text = 'Hello Webpack!';
module.exports = {
text: text
};
保存后你會(huì)發(fā)現(xiàn)瀏覽器自動(dòng)刷新并彈出彈框“Hello Webpack!”。
值得注意的是奔缠，通過(guò)webpack-dev-server打包后的代碼并不會(huì)進(jìn)入dist目錄掠抬，而是直接創(chuàng)建一個(gè)開(kāi)發(fā)服務(wù)器，并運(yùn)行打包后的代碼校哎。因此两波，通常我們會(huì)將Webpack打包分為兩種模式：開(kāi)發(fā)模式和生產(chǎn)模式。
開(kāi)發(fā)模式顧名思義就是給我們開(kāi)發(fā)時(shí)候用的闷哆，這時(shí)候我們就可以用上webpack-dev-server腰奋，從代碼自動(dòng)打包到自動(dòng)開(kāi)啟瀏覽器再到自動(dòng)刷新全部自動(dòng)化，提高了工作效率抱怔；生產(chǎn)模式顧名思義就是最終代碼上線(xiàn)時(shí)候用的劣坊，這時(shí)候我們就只需使用其最基礎(chǔ)的打包功能，最終打包后的代碼會(huì)進(jìn)入dist目錄屈留，我們只需要將其上傳服務(wù)器即可局冰。
本文重點(diǎn)總結(jié)
① 使用 webpack-dev-server 可自動(dòng)創(chuàng)建開(kāi)發(fā)服務(wù)器，實(shí)現(xiàn)代碼從自動(dòng)打包到自動(dòng)刷新頁(yè)面的自動(dòng)化開(kāi)發(fā)模式
② Webpack有兩種打包模式：開(kāi)發(fā)模式和生產(chǎn)模式灌危，開(kāi)發(fā)模式下可使用 webpack-dev-server 提高開(kāi)發(fā)效率
