Webpack配置-模塊化原理

• 準備工做

  兩個文件，分別使用 CommonJS和ES Module導出方法以下圖：

• 初識mode

  應爲說到模塊化原理須要用到 mode屬性因此這裏簡單認識一下 mode

  經過選擇 development, production 或 none 之中的一個，來設置 mode 參數，你能夠啓用 webpack 內置在相應環境下的優化。其默認值爲 production

  三者之間的區別： 默認狀況下是 production因此打包後的文件是被壓縮醜化以後的代碼以下圖： 不便於咱們進行源碼探索，因此此時能夠切換成 development模式打包成功的代碼以下： 這樣就方便咱們閱讀源碼

• CommonJS模塊化實現原理

  寫一個簡單的文件使用 CommonJS引入方法而後調用，最後將打包的入口文件改爲該文件: 能夠看到以下： 此時刪除全部註釋，空格最後格式化後代碼以下： 從源碼最外層能夠看出最外層包裹一個當即執行函數，代碼塊裏面也存在者一些當即執行函數，下一步將全部的當即執行函數刪掉再看源碼： 源碼註釋以下： 具體流程圖以下：

• ES Module模塊化實現原理

  準備工做如上，建立一個用ES Module導出的文件，而且建立一個文件而後使用ES Module引入，而後打包稿文件，刪除對應的註釋和格式化後代碼以下： 具體流程以下：

• CommonJS加載ES Module的原理

  這裏的原理和 ES Module原理基本相同，無非在調用方法的時候使用告終構的方式取到方法，而ES Module是經過對象調用屬性的方式調用方法，具體源碼以下:

• ES Module加載CommonJS的原理

  這裏和CommonJS差很少相同，基本上是使用CommonJS原理去實現，在最後調用的時候不在是使用解構的方式，而是經過屬性調用的方式具體源碼以下：