webpack 的編譯原理


      自從接觸了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 到文件系統。

           

      

 

       

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM