Webpack的Loader和Plugin

Loader

用於對模塊源碼的轉換，loader描述了webpack如何處理非javascript模塊，而且在buld中引入這些依賴。loader能夠將文件從不一樣的語言（如TypeScript）轉換爲JavaScript，或者將內聯圖像轉換爲data URL。好比說：CSS-Loader，Style-Loader等。

loader的使用很簡單：

在webpack.config.js中指定loader。module.rules能夠指定多個loader，對項目中的各個loader有個全局概覽。

loader是運行在NodeJS中，能夠用options對象進行配置。plugin能夠爲loader帶來更多特性。loader能夠進行壓縮，打包，語言翻譯等等。

loader從模板路徑解析，npm install node_modules。也能夠自定義loader，命名XXX-loader。

語言類的處理器loader：CoffeeScript，TypeScript，ESNext（Bable）,Sass,Less,Stylus。任何開發技術棧均可以使用webpack。

Plugin

目的在於解決loader沒法實現的其餘事，從打包優化和壓縮，到從新定義環境變量，功能強大到能夠用來處理各類各樣的任務。webpack提供了不少開箱即用的插件：CommonChunkPlugin主要用於提取第三方庫和公共模塊，避免首屏加載的bundle文件，或者按需加載的bundle文件體積過大，致使加載時間過長，是一把優化的利器。而在多頁面應用中，更是可以爲每一個頁面間的應用程序共享代碼建立bundle。

webpack功能強大，難點在於它的配置文件，webpack4默認不須要配置文件，能夠經過mode選項爲webpack指定了一些默認的配置，mode分爲：development/production，默認是production。

插件能夠攜帶參數，因此在plugins屬性傳入new實例。

【Mode】能夠在config文件裏面配置，也能夠在CLI參數中配置：webpack --mode=production（通常會選擇在CLI，也就是npm scripts裏面進行配置）。

在webpack4如下版本，webpack3.XX，經過plugins進行環境變量的配置。

【resolve】模塊，resolver是個庫，幫助webpack找到bundle須要引入的模塊代碼，打包時，webpack使用enhanced-resolve來解析路徑。 

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'),
    }
  }

 【Manifest】管理全部模塊之間的交互。runtime將可以查詢模塊標識符，檢索出背後對應的模塊。

問題1：webpack經過使用bundle計算content hash做爲文件名稱，文件修改，新的content hash執向新的文件，緩存無效，可是文件內容沒有修改，計算的hash仍是會改變，由於，runtime和manifest的注入在每次構建都會發生變化。要想解決這個文件能夠了解更多的runtime和manifest。

webpack原理：從配置文件定義的模塊列表開始，處理應用程序，從入口文件開始遞歸構建一個依賴圖，而後將全部模塊打包爲少許的bundle，一般只有一個，可由瀏覽器加載。