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