webpack的構建流程
一、運行流程
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整個打包過程則結束了
小結
參考文獻
- //mp.weixin.qq.com/s/PlqhRNZNIfBJHSVoVD3fHw
