電腦軟件推薦： Xmind Zen 2020免激活版 (已驗證可用) vmPing v1.3.21 綠色中文版 同花順遠(yuǎn)航版 v7.9.3.1 官方版本 Windows Firewall Control v6.0.2.0

Webpack 是一個流行的代碼編譯工具，廣泛應(yīng)用于前端開發(fā)。它由 Node.js 支持，并且作為一個模塊打包器，通過入口文件來定位所有相關(guān)文件，然后將這些文件編譯成瀏覽器可識別的格式（如 vue、ts、less、es6 等高級語法）。Webpack 可以執(zhí)行資源合并、打包、壓縮（包括將圖片轉(zhuǎn)換為 base64）、混淆等多種操作。

Webpack 是當(dāng)前最熱門的前端模塊化管理和打包工具，適用于前端開發(fā)的強(qiáng)大框架。如果你想學(xué)習(xí)如何使用 Webpack 框架但不確定如何安裝，可以直接下載 Webpack 安裝包來進(jìn)行設(shè)置。

Webpack 基本簡介

Webpack 是最受歡迎的前端資源模塊化管理和打包工具之一。它能夠?qū)⒍鄠€松散的模塊根據(jù)依賴和規(guī)則打包成適合生產(chǎn)環(huán)境的前端資源。同時，它支持按需加載模塊，通過代碼分割實現(xiàn)異步加載。借助 loader 轉(zhuǎn)換器，幾乎任何類型的資源都可以被視為模塊，包括 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。

框架特點

代碼拆分

Webpack 支持兩種模塊依賴的組織方式：同步和異步。異步依賴被用作分割點，從而形成新的代碼塊。經(jīng)過優(yōu)化的依賴樹中，每個異步塊都被打包成一個獨立的文件。

Loader

雖然 Webpack 本身只能處理原生的 JavaScript 模塊，但通過 loader 轉(zhuǎn)換器，可以將各種資源類型轉(zhuǎn)換為 JavaScript 模塊。這使得 Webpack 能夠處理各種類型的資源。

智能解析

Webpack 配備了智能解析器，能夠處理幾乎所有的第三方庫，無論它們是 CommonJS、AMD 還是普通的 JS 文件。在加載依賴時，甚至可以使用動態(tài)表達(dá)式，如 require("./templates/" + name + ".jade")。

插件系統(tǒng)

Webpack 還提供了一個功能強(qiáng)大的插件系統(tǒng)，大多數(shù)功能都依賴于這個系統(tǒng)。用戶可以開發(fā)并使用開源插件來滿足各種需求。

快速運行

Webpack 通過異步 I/O 和多級緩存來提高運行效率，從而實現(xiàn)令人驚嘆的快速增量編譯。

框架優(yōu)勢

1 按需加載模塊，延遲加載直到實際需要時再進(jìn)行更新。

2 雖然 Webpack 使用 CommonJS 編寫腳本，但也全面支持 AMD/CMD，便于舊項目的代碼遷移。

3 不僅 JavaScript 模塊可以被模塊化，各種資源類型都能處理。

4 開發(fā)方便，可以替代部分 grunt/gulp 的功能，如打包、壓縮、混淆以及圖片轉(zhuǎn) base64 等。

5 擴(kuò)展性強(qiáng)，插件機(jī)制完善

 

Webpack 安裝的兩種方式

1、運行 npm i webpack -g 進(jìn)行全局安裝，這樣可以在任何地方使用 webpack 命令。

2、在項目根目錄下運行 npm i webpack --save-dev 安裝到項目依賴中。

這兩種方式分別是全局安裝和局部項目內(nèi)安裝，下面以本地安裝為例進(jìn)行說明。

安裝 Webpack 后，還需要安裝 webpack-cli，建議使用 3.x 版本，其他版本可能不穩(wěn)定；例如：

npm install webpack-cli@3 -D