【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，通常只有一個，可由瀏覽器加載。