前端模組化開發規範的終結者Webpack詳解(純乾貨,不套路)
阿新 • • 發佈:2018-12-10
可謂集CommonJS、AMD、ES6等多種特性於一身,靈活、易用、高擴充套件性、效能優越。
核心配置
以下是webpack的幾個核心配置節:
節點 | 說明 |
---|---|
entry | 指定要打包的檔案 |
resolve | 配置尋找模組的規則 |
module | 配置處理模組的規則,專案裡面的一切都是模組,一個檔案就是一個模組 |
loader | 各種載入器,用於程式碼轉換 |
plugin | 配置擴充套件外掛,各種各樣的外掛,這也是其靈活性特色的一大體現 |
output | 打包後文件的輸出目錄 |
處理流程
首先,webpack
在啟動後會從entity
裡配置的module
開始,因為module
之間都會存在多個依賴有關係,所以它會去遞迴解析entry
依賴的所有module
;
然後,module
會以entity
為單位進行分組,一個entity
及其所有依賴的module
被分到一個組也就是一個chunk
;
最後,webpack
會將所有 chunk
轉換成檔案輸出;
在整個流程中,webpack
會在恰當的時機執行plugin