一菇绵、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ā)效率