webpack學習--Mr.Ember

webpack學習--Mr.Ember

一. 常見的loader

1. file-loader：把文件輸入到一個文件中，經過相對URL引用輸出的文件。

2. url-loader：與file-loader相似，在嗯見很小的狀況下一base64的方式把文件內容注入到代碼中。

3. source-map-loader：加載額外的source map文件，方便斷點調試。

4. bable-loader：把ES6轉化爲ES5。

5. style-loader：把css代碼注入到js中，經過DOM操做去加載css。

6. css-loader：加載css，支持模塊化，壓縮，文件導入等特性。

 

二. 常見的plugin

1. define-plugin：定義環境變量。

2. commons-chunk-plugin：提取公共代碼。

3. uglifyjs-webpack-plugin：經過uglifyES壓縮ES6代碼。

 

三. webpack運行流程

1. 初始化參數：從配置文件和shell語句中讀取與合併參數，得出最終的參數。

2. 開始編譯：用上一步獲得的參數初始化Compiler對象，加載全部配置的插件，執行對象run方法開始編譯。

3. 肯定入口：根據配置文件entry找出全部的入口文件。

4. 編譯模塊：從文件入口出發，調用全部配置的Loader對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟知道全部的入口依賴的文件都通過本步驟的處理。

5. 完成模塊編譯：