Webpack軟件簡(jiǎn)介
Webpack官方版是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴(lài)和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載。通過(guò) loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
Webpack框架特點(diǎn)
代碼拆分
Webpack 有兩種組織模塊依賴(lài)的方式，同步和異步。異步依賴(lài)作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化了依賴(lài)樹(shù)后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類(lèi)型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
智能解析
Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫(kù)，無(wú)論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴(lài)的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。
插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開(kāi)發(fā)和使用開(kāi)源的 Webpack 插件，來(lái)滿足各式各樣的需求。
快速運(yùn)行
Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。
Webpack軟件功能
生成Source Maps(使調(diào)試更容易)
開(kāi)發(fā)總是離不開(kāi)調(diào)試，方便的調(diào)試能極大的提高開(kāi)發(fā)效率，不過(guò)有時(shí)候通過(guò)打包后的文件，你是不容易找到出錯(cuò)了的地方，對(duì)應(yīng)的你寫(xiě)的代碼的位置的，Source Maps就是來(lái)幫我們解決這個(gè)問(wèn)題的。
通過(guò)簡(jiǎn)單的配置，webpack就可以在打包時(shí)為我們生成的source maps，這為我們提供了一種對(duì)應(yīng)編譯文件和源文件的方法，使得編譯后的代碼可讀性更高，也更容易調(diào)試。
使用webpack構(gòu)建本地服務(wù)器
想不想讓你的瀏覽器監(jiān)聽(tīng)你的代碼的修改，并自動(dòng)刷新顯示修改后的結(jié)果，其實(shí)Webpack提供一個(gè)可選的本地開(kāi)發(fā)服務(wù)器，這個(gè)本地服務(wù)器基于node.js構(gòu)建，可以實(shí)現(xiàn)你想要的這些功能，不過(guò)它是一個(gè)單獨(dú)的組件，在webpack中進(jìn)行配置之前需要單獨(dú)安裝它作為項(xiàng)目依賴(lài)
Loaders
Loaders是webpack提供的最激動(dòng)人心的功能之一了。通過(guò)使用不同的loader，webpack有能力調(diào)用外部的腳本或工具，實(shí)現(xiàn)對(duì)不同格式的文件的處理，比如說(shuō)分析轉(zhuǎn)換scss為css，或者把下一代的JS文件(ES6，ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器兼容的JS文件，對(duì)React的開(kāi)發(fā)而言，合適的Loaders可以把React的中用到的JSX文件轉(zhuǎn)換為JS文件。
Loaders需要單獨(dú)安裝并且需要在webpack.config.js中的modules關(guān)鍵字下進(jìn)行配置，Loaders的配置包括以下幾方面：
test：一個(gè)用以匹配loaders所處理文件的拓展名的正則表達(dá)式(必須)
loader：loader的名稱(chēng)(必須)
include/exclude:手動(dòng)添加必須處理的文件(文件夾)或屏蔽不需要處理的文件(文件夾)(可選);
query：為loaders提供額外的設(shè)置選項(xiàng)(可選)
Webpack框架優(yōu)勢(shì)
1 按需加載模塊，按需進(jìn)行懶加載，在實(shí)際用到某些模塊的時(shí)候再增量更新
2 webpack 是以 commonJS 的形式來(lái)書(shū)寫(xiě)腳本，但對(duì) AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
3 能被模塊化的不僅僅是 JS 了，能處理各種類(lèi)型的資源。
4 開(kāi)發(fā)便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。
5 擴(kuò)展性強(qiáng)，插件機(jī)制完善
Webpack工作原理
Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過(guò)一個(gè)給定的主文件(如：index.js)，Webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的所有依賴(lài)文件，使用loaders處理它們，最后打包為一個(gè)(或多個(gè))瀏覽器可識(shí)別的JavaScript文件。
Webpack安裝方法
請(qǐng)確保安裝了 Node.js 的最新版本。使用 Node.JS 最新的長(zhǎng)期支持版本(LTS - Long Term Support)，是理想的起步。使用舊版本，你可能遇到各種問(wèn)題，因?yàn)樗鼈兛赡苋鄙?webpack 功能以及/或者缺少相關(guān) package 包。
要安裝最新版本或特定版本，請(qǐng)運(yùn)行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack@
如果你使用 webpack 4+ 版本，你還需要安裝 CLI。
npm install --save-dev webpack-cli
對(duì)于大多數(shù)項(xiàng)目，我們建議本地安裝。這可以使我們?cè)谝肫茐氖阶兏?breaking change)的依賴(lài)時(shí)，更容易分別升級(jí)項(xiàng)目。通常，webpack 通過(guò)運(yùn)行一個(gè)或多個(gè) npm scripts，會(huì)在本地 node_modules 目錄中查找安裝的 webpack：
"scripts": {
"start": "webpack --config webpack.config.js"
}
當(dāng)你在本地安裝 webpack 后，你能夠從 node_modules/.bin/webpack 訪問(wèn)它的 bin 版本。
Webpack更新日志
1：全新界面，清爽，簡(jiǎn)單，高效
2：性能越來(lái)越好
華軍小編推薦：
Webpack是一款不用學(xué)習(xí)使用的軟件，非常簡(jiǎn)單的工具，有需要的用戶可以在華軍軟件園下載使用，保準(zhǔn)你滿意，另外還有眾多同款同類(lèi)軟件提供下載，如：AlphaEbot動(dòng)作編輯軟件、河小象編程客戶端、自動(dòng)化測(cè)試工具AutoRunner、Easy GUI、小海龜LOGO語(yǔ)言等。
您的評(píng)論需要經(jīng)過(guò)審核才能顯示
有用
有用
有用