? ??webpack?是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)在內(nèi)部構(gòu)建一個(gè)?依賴圖(dependency graph)，此依賴圖會(huì)映射項(xiàng)目所需的每個(gè)模塊，并生成一個(gè)或多個(gè)?bundle。
webpack擁有很高的可配置性，可以很好的滿足你的不同打包環(huán)境的配置需求。
接下來(lái)介紹下webpack的幾個(gè)關(guān)鍵概念：
入口（entry）
輸出（output）
loader
插件（plugin）
模式（mode）
瀏覽器兼容性（browser compatibility）
入口[Entry]：
? ??入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建其內(nèi)部 依賴圖（dependency graph）的開(kāi)始。進(jìn)入入口起點(diǎn)后，webpack 會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)（直接和間接）依賴的。
輸出[output]：
output?屬性告訴 webpack 在哪里輸出它所創(chuàng)建的?bundle，以及如何命名這些文件。主要輸出文件的默認(rèn)值是?./dist/main.js，其他生成文件默認(rèn)放置在?./dist?文件夾中。
模式[mode]:
提供?mode?配置選項(xiàng)，告知 webpack 使用相應(yīng)環(huán)境的內(nèi)置優(yōu)化，可以根據(jù)不同的需要配置不同的環(huán)境下的打包行為。
[加載]loader：
loader用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader可以使你在 import 或加載模塊時(shí)預(yù)處理文件。因此，loader類似于其他構(gòu)建工具中“任務(wù)（task）”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader可以將文件從不同的語(yǔ)言（如TypeScript）轉(zhuǎn)換為JavaScript或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為data RURL。幾乎可以在java模塊中導(dǎo)入大多數(shù)文件。
插件[plugin]:
插件是webpac的支柱功能。webpack本身也可以看作是一個(gè)插件，添加其他插件目的是為了解決loader無(wú)法實(shí)現(xiàn)的其他事情。
以上內(nèi)容整體會(huì)在一個(gè)webpack.config.js的文件中，舉個(gè)例子：
如果想要看更詳盡的webpack打包相關(guān)的知識(shí)，可以去webpack中文網(wǎng)：
