??就在昨天，經(jīng)過小編沒日沒夜的辛勤付出，終于慫恿到了Webpack成功入駐我們的Vue項目中，有句俗話說的好：“是你的就是你的”。既然Webpack已經(jīng)入駐我們Vue項目了，那總要干點活才能體現(xiàn)它的人生價值，下面我們一起來看看Webpack是如何工作的吧。
一、Webpack 基本工作
1.Webpack產(chǎn)生的原因
??大家是否還記得“模塊化”一族的故事，他們一族一直想要通過巴結(jié)“瀏覽器”來咸魚翻身，但是“瀏覽器”是個什么角色，根本不買他們的帳，只買我Webpack的帳，所以呢，好人做到底，送佛送到西，我的任務(wù)也就變成了幫助“模塊化”一族和“瀏覽器”大哥拉近關(guān)系。
【在開發(fā)過程中，模塊化的代碼時不能夠被瀏覽器識別的，必須經(jīng)過webpack的打包才能被瀏覽器識別】
2.Webpack工作流程
??每次幫“模塊化”跟“瀏覽器”大哥拉近關(guān)系之前，我都會叫“模塊化”他們將禮物都送到src先生哪里，然后我就從src先生哪里接過禮物，送到“瀏覽器”大哥的小弟dist中。
【①項目結(jié)構(gòu)：在項目開發(fā)的時候，一般有會兩個文件夾：src和dist。src主要存放開發(fā)時寫的源代碼；dist主要存放要部署到服務(wù)器上的文件，當(dāng)瀏覽器要解析某些文件時，直接將dist下的文件全部發(fā)送到服務(wù)器中即可】
【②工作原理：將src下的js文件通過webpack命令發(fā)送到dist中，當(dāng)瀏覽器要解析某些文件時，直接引用dist下的文件即可。比如：】
??2.1 在src下創(chuàng)建了三個文件：index.html index.js main.js 。index.js中用ES6模塊化的思想定義了兩個簡單的函數(shù)add和mul。main.js則是調(diào)用index.js中的兩個函數(shù)：
??2.2 通過webpack打包文件：在終端（cmd命令行）先進入到自己項目的目錄，輸入命令：webpack 入口文件 出口文件。比如webpack ./src/main.js ./dist/bound.js，是將src下的main.js文件打包到dist下的bound.js文件。
??2.3 引入dist下的文件： 在index.html中聽通過script引入文件 bound.js。我們不能直接在index.html中引用main.js文件，因為一些瀏覽器是不指出ES6模塊化開發(fā)的。
??上面呢就是我webpakc最最基本的工作。所謂能力越大責(zé)任也越大，所以下面我為你們講述一下我還有那些高強度的工作。
二、webpack配置文件
1.出入口文件的配置：webpack.config.js
??日子久了之后，我就發(fā)現(xiàn)，每次都需要從src哪接過禮物，然后再通過dist傳遞給“瀏覽器”大哥，工作效率十分低下，所以我也決定，雇傭 config小弟來幫我跑跑腿。
【①config產(chǎn)生的原因：每次我們都需要在終端輸入 “webpack 入口文件 出口文件”的命令，才能將入口文件打包后部署到服務(wù)器中。所以我們希望直接在終端輸入“webpack”就能自動幫我們打包好相應(yīng)的文件】
其實config小弟的工作也很簡單，只需要知道禮物從哪里來又要走什么樣的路到哪里去就行啦。
【②config工作思路：將入門文件和出口文件放到config中，然后直接在終端輸入“webpack”實現(xiàn)自動打包，所以我們需要知道哪個是入口文件，哪個是出口文件以及出口文件的路徑】
【③ 創(chuàng)建config步驟：1.創(chuàng)建 webpack.config.js文件 2.引入入口文件和出口文件 3. 動態(tài)獲取webpack.config.js文件的路徑 4.執(zhí)行webpack命令】
3.1 創(chuàng)建 webpack.config.js文件
??文件名一定一定一定是webpack.config.js
3.2 引入入口文件和出口文件
??通過CommomJS模塊化導(dǎo)入文件，entry代表入口文件，值是文件名；output代表出口文件，值必須是對象，對象內(nèi)部有兩個屬性 path和filename，分別代表出口文件的路徑和文件名，具體代碼如下圖所示：
module.exports={
//入口文件
entry:"./src/main.js",
//出口文件
output:{
path:"./dist",
filename:"bundle.js"
}
}
??結(jié)果告訴我們 ./dist 不是絕對路徑。絕對路徑嘛，簡單吖，直接改成“C:\Users\jer-pc\Desktop\Vue\01-Vue引入\Webpack配置文件”。小編可以很負責(zé)的告訴你，這樣子更是大錯特錯。因為不是所有用戶的路徑都符合你上述的路徑。因此我們需要通過node語法來動態(tài)獲取當(dāng)前 webpack.config.js的路徑。
3.3 動態(tài)獲取webpack.config.js文件的路徑
??首先，導(dǎo)入path模塊。通過node的語法導(dǎo)入path模塊，該模塊中存在一個名字叫“path”的包，這個包并不是我們開發(fā)人員創(chuàng)建的，是一個依賴node而存在的包，所以我們需要通過npm init 初始化來導(dǎo)入我們所需要的包 [ 在初始化之后就會生成一個json文件，當(dāng)我們想要單獨依賴node環(huán)境時，就需要創(chuàng)建這個文件 ]。初始化時，目前只需要填寫文件名，最后確認即可。具體看下面的代碼圖：
//導(dǎo)入 path模塊
const path = require('path')
??然后，填寫具體的路徑。在path模塊中有個叫resolve的函數(shù)，它的作用拼接兩個文件的地址，第一個參數(shù)是node中自帶的全局變量__dirname，它的作用是獲取當(dāng)前項目中webpack.config.js的路徑；第二個參數(shù)是出口文件所放的目錄。具體見下面的代碼：
//導(dǎo)入path模塊
const path = require('path')
//填寫路徑
module.exports={
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,'./dist'),
filename:"bundle.js"
}
}
3.4 執(zhí)行webpack命令
??在終端輸入“webpack”命令，就可以實現(xiàn)自動化打包相應(yīng)的文件，具體見下圖：
2.局部安裝webpack
①為什么要局部安裝？
??webpack版本很多，并不是所有的項目都適合用一個版本的webpack，所以為了適應(yīng)項目的需求，一般都會采用局部的webpack【局部的webpack也叫本地webpack】，和人要穿適合自己尺碼的衣服一個道理。
②如何使用局部webpack
??打開package.json文件，找到script所在的位置，然后用變量來存放webpack，最后再終端通過輸入“npm run 變量名”執(zhí)行。
??以上就是今天小編要帶給大家的webpack基本使用和webpack配置文件，配置文件主要通過config配置了出入口文件和局部安裝webpack。內(nèi)容似乎有點雜亂，還請大家多多包容小編的文筆O(∩_∩)O哈哈
?記得給小編點贊唷?
