自從接觸了react,vue 這兩個框架,都會用到webpack這個打包工具。面試的時候,經常被問到知道webpack的編譯原理嗎? 可以簡單的介紹一下。每每這個時候都被問的啞口無言,平時用的時候挺順手,真正說點之乎者也出來,還是有點難度的。
一、 webpack 的作用
總結為一下三點:
1、依賴管理:方便引用第三方模塊、讓模塊更容易復用,避免全局注入導致的沖突、避免重復加載或者加載不需要的模塊。會一層一層的讀取依賴的模塊,添加不同的入口;同時,不會重復打包依賴的模塊。
2、合並代碼:把各個分散的模塊集中打包成大文件,減少HTTP的請求鏈接數,配合UglifyJS(壓縮代碼)可以減少、優化代碼的體積。
3、各路插件:統一處理引入的插件,babel編譯ES6文件,TypeScript,eslint 可以檢查編譯期的錯誤。
一句話總結:webpack 的作用就是處理依賴,模塊化,打包壓縮文件,管理插件。
二、webpack 的原理
一切皆為模塊,由於webpack只支持js文件,所以需要用loader 轉換為webpack支持的模塊,其中plugin 用於擴張webpack 的功能,在webpack構建生命周期的過程中,在合適的時機做了合適的事情。
webpack怎么工作的過程:
1、解析配置參數,合並從shell(npm install 類似的命令)和webpack.config.js文件的配置信息,輸出最終的配置信息;
2、注冊配置中的插件,好讓插件監聽webpack構建生命周期中的事件節點,做出對應的反應;
3、解析配置文件中的entry入口文件,並找出每個文件依賴的文件,遞歸下去;
4、在遞歸每個文件的過程中,根據文件類型和配置文件中的loader找出對應的loader對文件進行轉換;
5、遞歸結束后得到每個文件最終的結果,根據entry 配置生成代碼chunk(打包之后的名字);
6、輸出所以chunk 到文件系統。