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();
...
return compiler;
}
...
编译构建流程
module.exports = {
entry: './src/file.js'
}
compile 编译
make 编译模块
_addModuleChain(context, dependency, onModule, callback) {
...
const Dep = (dependency.constructor);
const moduleFactory = this.dependencyFactories.get(Dep);
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();
})
})
}
build module 完成模块编译
输出流程
seal 输出资源
emit 输出完成
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
}