webpack核心概念

1. manifest

webpack中runtime和manifest主要用於管理所有模組的互動，主要是用於連線模組化應用程式的所有代 碼。runtime包含：在模組互動時，連線模組所需的載入和解析邏輯，包括瀏覽器中已載入模組的連線以及懶載入模組的執行連線。

管理模組互動的流程：

當編譯器(compiler)開始執行、解析和對映應用程式時，它會保留所有模組的詳細要點。這個資料集合稱為 「manifest」，當完成打包併發送到瀏覽器時，會在執行時通過 manifest 來解析和載入模組。無論你選擇哪種模組語法，那些 import 或 require 語句現在都已經轉換為webpack_require方法，此方法指向模組識別符號(module identifier)。通過使用 manifest 中的資料，runtime 將能夠查詢模組識別符號，檢索出背後對應的模組。

hmr（模板熱替換）主要用於無需重新整理頁面，在應用程式中替換，新增或刪除模組。主要有以下幾種方 式：

（1）保留在完全載入頁面時丟失的應用程式狀態；

（2）只更新變更內容，節省開發時間；

（3）調整樣式更加快速。

**分離是將**分離到不同的bundle中，能夠按需載入或者並行載入這些檔案。**分離可以獲取更小的bundle,以及控制資源載入優先順序，可影響載入時間

三種**分離方法：

（1）入口起點：使用entry選項自動分離**；

（2）防止重複：使用commonchunkplugin去重和分離chunk

（3）動態匯入：通過模組的內聯函式呼叫來分離**。

在模組化程式設計中，開發者將程式分解成離散功能塊，稱之為模組。

每個模組具有比完整程式更小的接觸面，使得校驗、除錯、測試輕而易舉。 精心編寫的模組提供了可靠的抽象和封裝界限，使得應用程式中每個模組都具有條理清楚的設計和明確的目的。

對比 node.js 模組，webpack 模組能夠以各種方式表達它們的依賴關係，幾個例子如下：

es2015 import 語句

commonjs require() 語句

amd define 和 require 語句

css/sass/less 檔案中的 @import 語句。

樣式(url(…))或 html 檔案()中的鏈結(image url)

通過loader可以支援各種語言和預處理器編寫模組

支援的型別： coffeescript,typescript,babel,sass,less,stylus

webpack 核心概念

核心概念 entry 打包的入口 output 打包的輸出 loaders webpack 處理js 之外的東西，就是使用的loaders plugins webpack 其它功能 比如壓縮 分割 等就是通過plugins 來完成的 entry 的入口 某段 的入口，這個入口會說明這段 所有的依賴 ...

webpack核心概念

打包流程的開始需要乙個入口，用於指定webpack的打包起點，webpack會從入口開始處理工程依賴，構建模組 module 之間的依賴關係樹，這些依賴關係模組在打包時被webpack封裝為chunk，隨後webpack會將chunk打包為bundle 資源入口的路徑字首，在配置時要求必須使用絕對路...

webpack核心概念

配置檔案？是webpack打包的依據，webpack如何打包，打包成什麼樣，全都有配置檔案指定 對於webpack，我們的主要工作也是編寫，配置webpack的配置檔案 1 entry module.exports entry 2 output module.exports output 不配置路徑...