一、執行流程
webpack 的執行流程是一個序列的過程，它的工作流程就是將各個外掛串聯起來
在執行過程中會廣播事件，外掛只需要監聽它所關心的事件，就能加入到這條webpack機制中，去改變webpack的運作，使得整個系統擴充套件性良好
從啟動到結束會依次執行以下三大步驟：
- 初始化流程：從配置檔案和
Shell語句中讀取與合併引數，並初始化需要使用的外掛和配置外掛等執行環境所需要的引數 - 編譯構建流程：從 Entry 發出，針對每個 Module 序列呼叫對應的 Loader 去翻譯檔案內容，再找到該 Module 依賴的 Module，遞迴地進行編譯處理
- 輸出流程：對編譯後的 Module 組合成 Chunk，把 Chunk 轉換成檔案，輸出到檔案系統
初始化流程
從配置檔案和 Shell 語句中讀取與合併引數，得出最終的引數
配置檔案預設下為webpack.config.js，也或者通過命令的形式指定配置檔案，主要作用是用於啟用webpack的載入項和外掛
關於檔案配置內容分析，如下注釋：
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
module.exports = {
// 入口檔案，是模組構建的起點，同時每一個入口檔案對應最後生成的一個 chunk。
entry: './path/to/my/entry/file.js'，
// 檔案路徑指向(可加快打包過程)。
resolve: {
alias: {
'react': pathToReact
}
},
// 生成檔案，是模組構建的終點，包括輸出檔案與輸出路徑。
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
// 這裡配置了處理各模組的 loader ，包括 css 預處理 loader ，es6 編譯 loader，圖片處理 loader。
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
],
noParse: [pathToReact]
},
// webpack 各外掛物件，在 webpack 的事件流中執行對應的方法。
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
webpack 將 webpack.config.js 中的各個配置項拷貝到 options 物件中，並載入使用者配置的 plugins
完成上述步驟之後，則開始初始化Compiler編譯物件，該物件掌控者webpack宣告週期，不執行具體的任務，只是進行一些排程工作
class Compiler extends Tapable {
constructor(context) {
super();
this.hooks = {
beforeCompile: new AsyncSeriesHook(["params"]),
compile: new SyncHook(["params"]),
afterCompile: new AsyncSeriesHook(["compilation"]),
make: new AsyncParallelHook(["compilation"]),
entryOption: new SyncBailHook(["context", "entry"])
// 定義了很多不同型別的鉤子
};
// ...
}
}
function webpack(options) {
var compiler = new Compiler();
...// 檢查options,若watch欄位為true,則開啟watch執行緒
return compiler;
}
...
Compiler 物件繼承自 Tapable，初始化時定義了很多鉤子函式
編譯構建流程
根據配置中的 entry 找出所有的入口檔案
module.exports = {
entry: './src/file.js'
}
初始化完成後會呼叫Compiler的run來真正啟動webpack編譯構建流程，主要流程如下：
compile開始編譯make從入口點分析模組及其依賴的模組，建立這些模組物件build-module構建模組seal封裝構建結果emit把各個chunk輸出到結果檔案
compile 編譯
執行了run方法後，首先會觸發compile，主要是構建一個Compilation物件
該物件是編譯階段的主要執行者，主要會依次下述流程：執行模組建立、依賴收集、分塊、打包等主要任務的物件
make 編譯模組
當完成了上述的compilation物件後，就開始從Entry入口檔案開始讀取，主要執行_addModuleChain()函式，如下：
_addModuleChain(context, dependency, onModule, callback) {
...
// 根據依賴查詢對應的工廠函式
const Dep = /** @type {DepConstructor} */ (dependency.constructor);
const moduleFactory = this.dependencyFactories.get(Dep);
// 呼叫工廠函式NormalModuleFactory的create來生成一個空的NormalModule物件
moduleFactory.create({
dependencies: [dependency]
...
}, (err, module) => {
...
const afterBuild = () => {
this.processModuleDependencies(module, err => {
if (err) return callback(err);
callback(null, module);
});
};
this.buildModule(module, false, null, null, err => {
...
afterBuild();
})
})
}
過程如下：
_addModuleChain中接收引數dependency傳入的入口依賴，使用對應的工廠函式NormalModuleFactory.create方法生成一個空的module物件
回撥中會把此module存入compilation.modules物件和dependencies.module物件中，由於是入口檔案，也會存入compilation.entries中
隨後執行buildModule進入真正的構建模組module內容的過程
build module 完成模組編譯
這裡主要呼叫配置的loaders，將我們的模組轉成標準的JS模組
在用Loader 對一個模組轉換完後，使用 acorn 解析轉換後的內容，輸出對應的抽象語法樹（AST），以方便 Webpack後面對程式碼的分析
從配置的入口模組開始，分析其 AST，當遇到require等匯入其它模組語句時，便將其加入到依賴的模組列表，同時對新找出的依賴模組遞迴分析，最終搞清所有模組的依賴關係
輸出流程
seal 輸出資源
seal方法主要是要生成chunks，對chunks進行一系列的優化操作，並生成要輸出的程式碼
webpack 中的 chunk ，可以理解為配置在 entry 中的模組，或者是動態引入的模組
根據入口和模組之間的依賴關係，組裝成一個個包含多個模組的 Chunk，再把每個 Chunk 轉換成一個單獨的檔案加入到輸出列表
emit 輸出完成
在確定好輸出內容後，根據配置確定輸出的路徑和檔名
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
}
在 Compiler 開始生成檔案前，鉤子 emit 會被執行，這是我們修改最終檔案的最後一個機會
從而webpack整個打包過程則結束了
小結
參考文獻
- https://mp.weixin.qq.com/s/PlqhRNZNIfBJHSVoVD3fHw