【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。
webpack原理：從配置文件定義的模塊列表開始，處理應用程序，從入口文件開始遞歸構建一個依賴圖，然后將所有模塊打包為少量的bundle，通常只有一個，可由瀏覽器加載。