webpack 初探

webpack--模塊化加載器和打包工具。

webpack號稱require anything而且按需加載，具備監聽、自動打包、壓縮混淆腳本等強大功能，在項目中使用webpack可以方便的進行模塊依賴管理，好比直接使用require()就能引入一個資源（js文件，css文件，html文件以及圖片文件都可），而且原生的webpack支持commonJs和AMD規範。

webpack的默認配置文件是webpack.config.js，其寫法和node類似，模塊化，暴露接口。具體其配置參數建議查看官網文檔.

觀察 webpack 打包後的輸出文件能發現 webpack 的打包原理很簡單.

該圖是我新建項目的目錄結構以及 webpack 配置文件的內容。

入口文件 index.js 文件中引入了a.js 和 b.js 兩個文件：

a.js 文件中引入了 b.js 文件

b.js 文件內容很簡單，就一個打印輸出

cmd執行 webpack 命令...

花費114ms，打包完成，接下來咱們查看打包以後的輸出文件：

整個打包以後的bundle.js文件其實是一個匿名函數自執行方法，函數的方法體部分是webpack打包的引導部分，其中定義了__webpack_require__方法。而參數則爲一個數組。數組的每一項都是個function。function的內容實則是每一個模塊的內容。
接下來咱們主要來看看文件的截圖部分。

由這部分代碼很容易能看出，webpack將每個js文件及其依賴封裝成一個單獨的部分，而js文件中的 require 方法對應的就是__webpack_require__，__webpack_require__ 會根據傳入的 moduleId 再去加載對應的代碼。因爲webpack是將文件中的依賴文件採用一個編號替代，因此一個文件即便是被引用屢次，webpack也只會將其打包一次！