回顧歷史
Web應(yīng)用日益復(fù)雜嗜憔，前端開(kāi)發(fā)也發(fā)生了翻天覆地的變化變得盤(pán)根錯(cuò)節(jié)杜跷，到今天已經(jīng)非常復(fù)雜和龐大了！用html歪架、css股冗、javascript老老實(shí)實(shí)的寫(xiě)個(gè)頁(yè)面的時(shí)代早已過(guò)去。而現(xiàn)在要完成工作需要借助很多額外的東西和蚪，比如工程化止状、自動(dòng)化等等烹棉。這樣才顯得有逼格，才像一個(gè)真正的程序猿怯疤。如果說(shuō)還停留在切個(gè)圖浆洗，下載個(gè)js效果懟上去的階段，顯然你會(huì)脫節(jié)的集峦。由此也帶動(dòng)了很多前端工具的發(fā)展伏社，以Gulp、Grunt塔淤、webpack等為代表的構(gòu)建工具猶如雨后春筍般的生長(zhǎng)摘昌，而webpack更為流行，使用更為廣泛高蜂，可以說(shuō)它現(xiàn)在已經(jīng)是前端開(kāi)發(fā)的的標(biāo)配了聪黎。所以這次我會(huì)用一個(gè)系列的文章詳細(xì)去介紹webpack，由淺入深解析webpack妨马，再通過(guò)實(shí)戰(zhàn)例子配合挺举，掌握以后足以解決你工作中的問(wèn)題。同時(shí)這套系列文章是針對(duì)最新的4.X的版本烘跺。
Webpack是什么
webpack是一款工具湘纵？什么工具？有人管他叫打包工具滤淳，這樣太low了梧喷。可以看看webpack官網(wǎng)脖咐，頁(yè)面底部的一個(gè)個(gè)小頭像代表的是給webpack贊助過(guò)的人铺敌，鼠標(biāo)放上去還可以看到他贊助了多少錢(qián)。就憑這么多人的贊助屁擅，也不能叫這么low逼的名偿凭，聽(tīng)得好像是個(gè)壓縮軟件。得起個(gè)高大上的名派歌，叫構(gòu)建工具（當(dāng)然打包的功能是它的一大特色）
前端里的什么工程化呀自動(dòng)化呀弯囊，這些東西有個(gè)特點(diǎn)，就是源代碼無(wú)法在瀏覽器里直接運(yùn)行胶果，必需通過(guò)編譯才行匾嘱。那構(gòu)建工具其實(shí)就能做這些事情。如：
- 代碼編譯早抠，把ES6轉(zhuǎn)成ES5
- 模塊合并霎烙，把多個(gè)文件合并成一個(gè)文件，減少http請(qǐng)求
- 代碼壓縮優(yōu)化，抽取公共代碼悬垃，減少代碼量
這些都是構(gòu)建工具要做的事情游昼，但是這些東西都是用代碼去實(shí)現(xiàn)，讓他們通過(guò)代碼自動(dòng)完成這些事情盗忱，解放我們的生產(chǎn)力酱床。webpack最大的一個(gè)特色就是打包，官網(wǎng)的那張大圖所體現(xiàn)的就是打包的功能趟佃，并能解決模塊間相互依賴的問(wèn)題，它能把亂成一鍋粥的文件打包成清晰的文件昧捷，快刀斬亂麻闲昭！其次webapck是以模塊為基石，對(duì)于模塊化的支持體現(xiàn)的淋漓盡致靡挥，在webpack中所有的內(nèi)容都是模塊序矩，一個(gè)圖片、一個(gè)css文件跋破、一個(gè)js文件都是一個(gè)模塊簸淀。
安裝
- npm init -y
- npm install --save-dev webpack
- npm install --save-dev webpack-cli
注意：
1、安裝前確認(rèn)一件事件毒返，nodejs的版本在5.0以上
2租幕、npm init -y為生成package.json文件
3、兩條命令可以簡(jiǎn)寫(xiě)為：npm i webpack webpack-cli -D
4拧簸、建議安裝到項(xiàng)目中而并非全局環(huán)境下劲绪。安裝到全局環(huán)境下可能導(dǎo)致有的插件無(wú)法使用以及避免不同的項(xiàng)目依賴的版本不同而出現(xiàn)問(wèn)題
5、4.x的版本把cli分離出來(lái)了盆赤，所以必需安裝webpack-cli
6贾富、驗(yàn)證是否安裝成功：webpack -v
配置文件
配置文件猶如webpack的大腦，webpack的工作都是通過(guò)配置文件完成的牺六。編譯哪個(gè)文件颤枪、怎么編譯、編譯成什么樣淑际、輸出為什么等等畏纲，所有的操作都是按配置文件里的內(nèi)容來(lái)完成的，所以配置文件一個(gè)重量級(jí)的嘉賓庸追，webapck想要運(yùn)行的話配置文件是必不可少的東西霍骄。
配置文件有6個(gè)核心的東西組成，就像JavaScript由ECMAScript淡溯、DOM读整、BOM三部分組成一樣。
entry：入口文件（你要打包咱娶，就告訴我打包哪些）output：出口文件（我打包完了米间，給你放到哪里）module：模塊（放lorder强品，編譯瀏覽器不認(rèn)識(shí)的東西）plugins：插件（輔助開(kāi)發(fā)，提高開(kāi)發(fā)效率）devServer：服務(wù)器（webpack提供的本地服務(wù)器）mode：模式屈糊，分為開(kāi)發(fā)模式的榛、生產(chǎn)模式。此為4.X里新增的
注意：
1逻锐、配置文件的名字建議叫webpack.config.js夫晌，需要放在項(xiàng)目文件夾的根目錄下。當(dāng)然你可以換成其它的名字昧诱，但是運(yùn)行的時(shí)候就要增加額外的步驟了
2晓淀、webpack采用CommonJS的規(guī)范，上面的所有參數(shù)都需要放在對(duì)象里盏档，用moudle.exports導(dǎo)出
小試牛刀
在項(xiàng)目文件夾（我的為webpack-demo）的根目錄下創(chuàng)建必要的文件夾及文件凶掰，結(jié)構(gòu)如下：
- [ ] webpack-demo
- [ ] node_modules
- [ ] src
- main.js
- show.js
- [ ] index.html
- [ ] package.json
- [ ] webpack.config.js
如下圖
show.js代碼如下
//聲明一個(gè)函數(shù)，最終做為一個(gè)模塊被導(dǎo)出
const show=content=>{
const box=document.getElementById("box");
box.innerHTML=`你好蜈亩！${content}`;
}
export {show}; //ES6導(dǎo)出模塊的語(yǔ)法
main.js代碼如下
import {show} from './show'; //ES6導(dǎo)入模塊的語(yǔ)法懦窘，‘./’為main.js的根目錄src，ES6里導(dǎo)入的模塊為js話不需要加后綴名
show('kaivon');
index.html代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box"></div>
</body>
</html>
package.json.js代碼如下
const path=require('path'); //nodejs的語(yǔ)法稚配，引入路徑模塊畅涂，為了輸出的時(shí)候找絕對(duì)路徑
module.exports={
entry:'./src/main.js', //入口文件為main.js
output:{ //輸出
path:path.resolve(__dirname,'dist'), //path.resolve為nodejs的固定語(yǔ)法，用于找到當(dāng)前文件的絕對(duì)路徑
filename:'bundle.js' //輸出的文件名
},
};
在終端里執(zhí)行命令webpack后药有，不出意外的話終端里顯示如下就表示成功了
同時(shí)看一下文件結(jié)構(gòu)目錄毅戈，多了一個(gè)dist文件夾，以及bundle.js文件愤惰。這兩個(gè)就是webpack打包生成的文件苇经，如下
在index.html文件里引入bundle.js文件后，用瀏覽器打開(kāi)index.html宦言，可以看到頁(yè)面里有內(nèi)容了扇单。這就代表我們已經(jīng)使用webpack打包了一個(gè)文件，它的基本用法已經(jīng)跑了奠旺。
<body>
<div id="box"></div>
<script src="dist/bundle.js"></script>
</body>
語(yǔ)法及步驟
語(yǔ)法
entry入口文件
- 只打包一個(gè)文件（單入口）蜘澜，寫(xiě)個(gè)字符串
- 把多個(gè)文件打包成一個(gè)文件，寫(xiě)個(gè)數(shù)組
- 把多個(gè)文件分別打包成多個(gè)文件响疚，寫(xiě)成對(duì)象
webpack把打包后的文件叫Chunck
output出口文件
filename輸出文件的名稱
1鄙信、輸出一個(gè)文件，寫(xiě)個(gè)字符串
2忿晕、輸出多個(gè)文件装诡，文件名前面加個(gè)標(biāo)識(shí)符（id/name/hash）path輸出文件的路徑
1、路徑必需為絕對(duì)路徑
2、__dirname是nodejs里的一個(gè)模塊鸦采，表示當(dāng)前文件的絕對(duì)路徑
3宾巍、path為nodejs的系統(tǒng)模塊，直接引入后調(diào)用path.resolve(__dirname,'輸出文件的路徑');
步驟
當(dāng)我們?cè)诮K端里輸入webpack命令的時(shí)候webpack會(huì)按以下的步驟開(kāi)始工作
- 先打開(kāi)根目錄下的
webpack.config.js- 找
entry（入口）屬性的值- 進(jìn)入到
main.js里渔伯，看到它又依賴show.js顶霞，再找到show.js- 把
main.js與show.js合并成一個(gè)js文件- 在
webpack.config.js里找到output（出口）屬性- 解析
output里的path與filename屬性的值- 把第4步合并成的js文件放到
dist文件夾里，并起個(gè)名字叫bundle.js
趁熱打鐵
下面演示多入口锣吼，在src目錄里新建兩個(gè)js文件选浑，1.js與2.js，代碼如下：
1.js
console.log('這是第一個(gè)入口文件吐限！');
2.js
console.log('這是第二個(gè)入口文件鲜侥！');
修改webpack.config.js文件
const path=require('path');
//兩個(gè)entry分別一一對(duì)應(yīng)兩個(gè)filename
module.exports={
//entry:['./src/1.js','./src/2.js'],
entry:{
one:'./src/1.js',
two:'./src/2.js'
},
output:{
//filename:'bundle.js',
filename:'[name].bundle.js' //可以以name/id/hash放在中括號(hào)里區(qū)分文件名
path:path.resolve(__dirname,'dist'),
}
}
分別注釋對(duì)應(yīng)的entry與filename，在終端里執(zhí)行命令：webpack后诸典，查看dist文件夾及運(yùn)行index.html后查看效果
1、當(dāng)entry為數(shù)組的時(shí)候崎苗，webpack會(huì)把數(shù)組里所有文件打包成一個(gè)js文件
2狐粱、當(dāng)entry為對(duì)象的時(shí)候，webpack會(huì)把對(duì)象里的文件分別打包成多個(gè)文件
文章里所說(shuō)到的只是entry與output的常用配置胆数，它的配置不止這些肌蜻，可以參考以下鏈接
entry的所有配置https://webpack.js.org/concepts/entry-points/
output的所有配置https://webpack.js.org/concepts/output/
