前端webpack workflow（一）——Webpack入門

DevWiki 發(fā)布于2019-08-21 10:46 / 1254人閱讀

摘要：開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無(wú)縫接合。異步方式，將依賴分割成多個(gè)節(jié)點(diǎn)，然后每個(gè)節(jié)點(diǎn)形成一個(gè)新的文件塊。會(huì)處理最常見(jiàn)的模塊標(biāo)準(zhǔn)和。通過(guò)聲明依賴，可以選擇一個(gè)本地的版本，而不需要使用全局聲明的版本。

作者：Jogis
原文鏈接：https://github.com/yesvods/Blog/issues/2
轉(zhuǎn)載請(qǐng)注明原文鏈接以及作者信息

模塊加載器

隨著前端項(xiàng)目越來(lái)越復(fù)雜（尤其是大型SPA），以及命名空間混亂，一系列模塊加載器隨之而生。

Javascript模塊標(biāo)準(zhǔn)有：AMD 和 CommonJS

最有名的加載器有：RequireJS、SeaJS、Bowserify

那么，有人就會(huì)問(wèn)，這么多模塊加載器，為什么還要重復(fù)發(fā)明輪子？

童鞋們騷安勿燥，下面為大家娓娓道來(lái) Webpack的特性以及使用入門。

Webpack

為什么需要另外一款模塊加載器？

現(xiàn)有的模塊加載器，不能很好適配大型項(xiàng)目（大型單頁(yè)面應(yīng)用程序）開發(fā)。開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無(wú)縫接合。

盡管嘗試去拓展現(xiàn)有的模塊加載器，但最后發(fā)現(xiàn)不可能完成所有功能目標(biāo)。

開發(fā)這一款加載器的目標(biāo)

分離現(xiàn)有依賴樹，按需加載

高效保證第一次加載

靜態(tài)資源模塊化

第三方庫(kù)模塊化加載

實(shí)現(xiàn)加載器幾乎所有環(huán)節(jié)可配置性

適配大項(xiàng)目開發(fā)

Webpack特性功能？ 代碼分離

Webpack有兩種依賴聲明方式：同步與異步。異步方式，將依賴分割成多個(gè)節(jié)點(diǎn)，然后每個(gè)節(jié)點(diǎn)形成一個(gè)新的文件塊。經(jīng)過(guò)優(yōu)化后的文件塊樹，會(huì)以一個(gè)個(gè)文件形式分發(fā)出去（僅僅打包成一個(gè)大文件形式是很低效的，詳見(jiàn)）。

加載器插件

原生的Webpack只能處理JS文件，使用加載器插件，可以將其他資源專為JS資源。通過(guò)這種方式來(lái)加載，每一種資源都可以被Webpack看作是一個(gè)模塊來(lái)加載。

智能模塊解析

Webpack內(nèi)置一個(gè)智能加載模塊，可以用于處理幾乎所有的第三方庫(kù)。它甚至可以解析依賴聲明的表達(dá)式，比如 require("./templates" + name + ".jade")。Webpack會(huì)處理最常見(jiàn)的JS模塊標(biāo)準(zhǔn)：CommonJS 和 AMD。

插件系統(tǒng)

Webpack的最大特點(diǎn)，就是配套了非常豐富的插件系統(tǒng)。大部分內(nèi)置特性功能都是基于這套插件系統(tǒng)。它可以讓你根據(jù)需要自定義Webpack，將一般插件作為開源項(xiàng)目發(fā)布出去。

Webpack安裝 通過(guò)NPM包管理器

npm install -g webpack

項(xiàng)目中初始化Webpack

最優(yōu)的方式就是，在項(xiàng)目中聲明Webpack依賴。通過(guò)聲明依賴，可以選擇一個(gè)本地的Webpack版本，而不需要使用全局聲明的版本。

添加一個(gè)npm 配置文件package.json：

npm init

然后需要回答一系列問(wèn)題。如果希望把自己項(xiàng)目發(fā)布到npm上面，這些問(wèn)題的回答非常重要。（如果不需要的話，一直回車就好啦）

安裝webpack、添加依賴到package.json

npm install webpack --save-dev

其中--save-dev就是聲明在開發(fā)階段需要用到webpack，并且自動(dòng)把webpack依賴寫到package.json配置文件上面，生產(chǎn)環(huán)境就不需要安裝（上生產(chǎn)環(huán)境時(shí)候，webpack已經(jīng)把項(xiàng)目打包好啦，不需要它老人家出馬了^_^）