一简肴、概念
1、基本組成：entry澡为、output、loader夺欲、plugins
entry：
入口起點(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始今膊。進入入口起點后些阅，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
入口可以有一個 也可以有多個斑唬，如果多個入口的話 會分別創(chuàng)建依賴圖市埋，相互獨立、完全分離恕刘＄突眩可以通過CommonsChunkPlugin插件 來共享通用的chunk，復用代碼和模塊褐着。
output：
output?屬性告訴 webpack 在哪里輸出它所創(chuàng)建的?bundles坷澡，以及如何命名這些文件，默認值為?./dist献起。
只有一個輸出（即使可以存在多個入口起點洋访，但只指定一個輸出配置镣陕。）
如果配置創(chuàng)建了多個單獨的 "chunk"（例如谴餐，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件），則應該使用占位符(substitutions)來確保每個文件具有唯一的名稱呆抑。
loader：
loader?讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）岂嗓。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力鹊碍，對它們進行處理厌殉。
三種使用方式：webpack中配置；@import引入侈咕；CLI使用公罕；
解析：loader 遵循標準的模塊解析。多數(shù)情況下耀销，loader 將從模塊路徑（通常將模塊路徑認為是?npm install,?node_modules）解析楼眷。
plugins：
loader 被用于轉換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務。插件的范圍包括罐柳，從打包優(yōu)化和壓縮掌腰，一直到重新定義環(huán)境中的變量。插件接口功能極其強大张吉，可以用來處理各種各樣的任務齿梁。常用的插件有：HtmlWebpackPlugin、HappyPack肮蛹、MiniCssExtractPlugin等勺择。
（梳理一下 常用的插件）
模式：
提供?mode?配置選項，告知 webpack 使用相應模式的內置優(yōu)化伦忠。（會有怎樣不同的優(yōu)化酵幕？？缓苛？）
通過選擇?development?或?production?之中的一個芳撒，來設置?mode?參數(shù)，你可以啟用相應模式下的 webpack 內置的優(yōu)化
二未桥、打包原理
1笔刹、概念：模塊解析
使用enhanced-resolve，webpack 能夠解析三種文件路徑：絕對路徑冬耿、相對路徑舌菜、模塊路徑。
2亦镶、流程
（原文：https://juejin.im/entry/5b0e3eba5188251534379615）
1）初始化：啟動構建日月，讀取與合并配置參數(shù)，加載 Plugin缤骨，實例化 Compiler爱咬。
2）編譯：從 Entry 發(fā)出，針對每個 Module 串行調用對應的 Loader 去翻譯文件內容绊起，再找到該 Module 依賴的 Module精拟，遞歸地進行編譯處理。
3）輸出：對編譯后的 Module 組合成 Chunk虱歪，把 Chunk 轉換成文件蜂绎，輸出到文件系統(tǒng)。
如果只執(zhí)行一次構建笋鄙，以上階段將會按照順序各執(zhí)行一次师枣。但在開啟監(jiān)聽模式下，流程將變?yōu)槿缦拢?/p>
3萧落、輸出文件
輸出后文件bundle.js践美， (function (modules) { __webpack_require__ ...})([modules1劳殖，modules2，modules3...])
(function(modules) {
? // 模擬 require 語句
? function __webpack_require__() {
? }
? // 執(zhí)行存放所有模塊數(shù)組中的第0個模塊
? __webpack_require__(0);
})([/*存放所有模塊的數(shù)組*/])
