Webpack個(gè)人學(xué)習(xí)拙見

muddyway 發(fā)布于2019-08-23 15:36 / 2440人閱讀

摘要：通過各種和的相關(guān)配置，將復(fù)雜的文件和依賴包細(xì)化打包，使得無論是開發(fā)還是上線發(fā)布都大大節(jié)省了效率。所以我們將移入內(nèi)。寫在最后這是自己第一次寫學(xué)習(xí)筆記，自知內(nèi)容比較基礎(chǔ)還需要深入研究，算是自己對(duì)相關(guān)知識(shí)的梳理吧。

Webpack是什么？

"A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. "
這是gayhub上對(duì)它的原文介紹，是不是只看懂了javascript、ES6、CSS、JSON？(開個(gè)玩笑:))
其實(shí)看下面這張圖就比較清晰了：

(圖片來源官網(wǎng) 鏈接描述)
總結(jié)以上，我個(gè)人的理解是：一切皆模塊。Webpack通過各種loader和plugin的相關(guān)配置，將復(fù)雜的文件和依賴包細(xì)化、打包，使得無論是開發(fā)還是上線發(fā)布都大大節(jié)省了效率。

為什么選擇Webpack？ 與Rollup對(duì)比

在開發(fā)大型項(xiàng)目、應(yīng)用時(shí)一般使用 Webpack，開發(fā)框架庫(kù)時(shí)一般使用 Rollup。

例如React、Vue都是使用Rollup作為構(gòu)建工具，它的特點(diǎn)就是相比其他JavaScript打包工具，Rollup總能打出更小更快的包；
而Webpack則以功能全面取勝（例如：對(duì)代碼分割和靜態(tài)資源導(dǎo)入顯著優(yōu)勢(shì)，熱更新HMR等等），并且在Version 2中加入了Tree Shaking功能(即刪除無用代碼)

與Parcel對(duì)比

使用過Webpack的猿(媛)們應(yīng)該都了解過其比較繁瑣的配置文件，而Parcel則幾乎是零配置，只有少量的配置項(xiàng)通過命令行即給處理了，這對(duì)于追求簡(jiǎn)易開發(fā)流程的工程師來說是很友好了。

例外Grunt和Gulp本人沒有了解過，大家感興趣的話可以自行查找一下相關(guān)資料文檔。
總之，拋開一切環(huán)境談工具都是耍流氓，技術(shù)并無好壞，只有適不適合。大家應(yīng)該先明白自己需要實(shí)現(xiàn)的功能是什么，才能選擇好應(yīng)該使用什么技術(shù)，切不可盲目跟風(fēng)。

如何使用Webpack？

寫在前面：此次Webpack版本4.29.5，Webpack-cli版本3.2.3
①首先選擇新建項(xiàng)目的文件夾，打開命令行工具輸入"mkdir webpack-demo",然后"cd webpack-demo"
②"npm init -y"
③"npm install webpack webpack-cli --save-dev"
這是初始化Webpack的第一步，此時(shí)的目錄結(jié)構(gòu)應(yīng)該是這樣的:

接著在根目錄下新建webpack.config.js和dist文件夾，將index.html移入dist文件夾內(nèi)
webpack.config.js是為了迎合項(xiàng)目的復(fù)雜配置需求，后面會(huì)介紹它的具體內(nèi)容，總之是Webpack中非常重要的部分；
dist中的文件是作為"分發(fā)"文件，其中代碼就是我們最小化和優(yōu)化后的代碼，在打包后會(huì)出現(xiàn)在瀏覽器中；而src中的文件是作為"源"文件，也就是我們開發(fā)編輯的代碼。所以我們將index.html移入dist內(nèi)。

我們?cè)趙ebpack.config.js中寫入以下內(nèi)容：

工程的自定義配置寫好了，下面來寫需要打包的文件./dist/index.html和./src/index.js

寫好之后還需要在終端中安裝一下lodash(這個(gè)工具庫(kù)真的挺好用的，感興趣的朋友可以了解一下)：npm install --save lodash
OK,萬(wàn)事具備，只欠"npx webpack",我們?cè)诿钚兄休斎胍幌拢瑤酌胫兄笏鼤?huì)輸出下面這些，表示打包成功了：

然后我們打開index.html會(huì)發(fā)現(xiàn)頁(yè)面上出現(xiàn)了"Hello webpack",而dist文件夾中也新增了main.js文件。恭喜你，一個(gè)極簡(jiǎn)單的打包工程就算完成了！

可是這點(diǎn)知識(shí)是遠(yuǎn)遠(yuǎn)滿足不了我們?nèi)粘９ぷ鞯模旅娼榻B下個(gè)人認(rèn)為使用Webpack必備姿勢(shì)。

①入口文件如果是一個(gè)即可以是上面的寫法，如果是多個(gè)則可以是下面這種：

比較推薦第二種key-value的形式，原因就是方便找到；

②出口文件中"[name]"既是entry的js名稱：

③Loader的介紹以處理css文件為例：
早期傳統(tǒng)引用css文件的方式一般都是利用link標(biāo)簽，而隨著工程中頁(yè)面的模塊化、Sass和Less等預(yù)處理器語(yǔ)言的出現(xiàn)以及性能優(yōu)化要求的提高，對(duì)css文件的加載方式也發(fā)生了變化，這就是利用Webpack的好處之一。

解釋下上面的截圖，"test"屬性利用正則表示式匹配文件后綴名；"use"里則是各loader，實(shí)際的加載順序和這里寫的順序是相反的，也就是從下往上執(zhí)行。
接著我們新建css文件：

然后在index.js里import一下： import "./css/base.css"，
打開index.html就可以看到樣式的改變了。
如果你是less/sass文件，則需要修改下配置：

將"test"里的css換成less，然后重新命名下css文件，利用相關(guān)的語(yǔ)法：

index.js里的import也是需要修改的。最后你會(huì)發(fā)現(xiàn)頁(yè)面樣式跟著改變了。
這里需要補(bǔ)充的一點(diǎn)是，如果你的工程中同時(shí)存在css文件和less/sass文件，在配置loader時(shí)，就應(yīng)該重新定義個(gè)對(duì)象，而不是緊跟css-loader來寫其相關(guān)配置項(xiàng)！
④Plugin的介紹：
Webpack中有兩種插件，一種是Webpack自帶的，一種是要通過npm包require的：

如圖，引入依賴后在plugin數(shù)組中配置相關(guān)內(nèi)容（例子中UglifyJsPlugin則是Webpack自帶的)。

這篇文章比較詳細(xì)介紹了主要的幾種插件及其配置信息，大家感興趣的話可以看看鏈接描述
剛開始學(xué)習(xí)Webpack時(shí)，我對(duì)Plugin和Loader的概念有些混淆，其實(shí)簡(jiǎn)單來說，Loader可以理解成文件的轉(zhuǎn)換器，而Plugin的是一種出現(xiàn)于整個(gè)打包生命周期的運(yùn)行機(jī)制，是一種擴(kuò)展功能。

前幾天看到一道面試題是問插件的實(shí)現(xiàn)原理是什么？自己也去查找了相關(guān)資料，個(gè)人理解如下：Webpack是一系列復(fù)雜工序，其中一個(gè)名為compiler的對(duì)象會(huì)作為參數(shù)調(diào)用插件實(shí)例的apply方法，
插件實(shí)例在獲取到compiler對(duì)象后，就可以通過compiler.plugin(事件名稱, 回調(diào)函數(shù)) 監(jiān)聽到Webpack廣播出來的事件，進(jìn)而改變相應(yīng)的結(jié)果，實(shí)現(xiàn)其功能。

寫在最后：
這是自己第一次寫學(xué)習(xí)筆記，自知內(nèi)容比較基礎(chǔ)還需要深入研究，算是自己對(duì)相關(guān)知識(shí)的梳理吧。有不對(duì)之處還望各位大佬不吝賜教！