能大致说一下webpack的生命周期吗？

[Diazhao]

• 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。

• 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。

• 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。

• 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。

• 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。

• 输出所有chunk到文件系统。

先起一个头，抽空慢慢展开记录下。
参考：
webpack原理与实战 --腾讯web前端

[Diazhao]

上面说的流程确实是webpack工作的一个大致的流程。下面补充两点，

1. webpack中loader的运行时机
   loader的运行在循环递归解析module的时候执行。
   主要有两个阶段，一个是loader的初始化阶段，一个是运行阶段。
   loader初始化阶段是Compiler中的createNormalModuleFactory时候，通过NMF关联到ruleSet中执行loader初始化。

	createNormalModuleFactory() {
		// 通过这个工厂类中的RuleSet去判定按照某种规则加载各种loader
		const normalModuleFactory = new NormalModuleFactory(
			this.options.context,
			this.resolverFactory,
			this.options.module || {}
		);
		this.hooks.normalModuleFactory.call(normalModuleFactory);
		return normalModuleFactory;
	}

loader运行阶段是在build-module阶段

    doBuild(options, compilation, resolver, fs, callback) {
		const loaderContext = this.createLoaderContext(
			resolver,
			options,
			compilation,
			fs
		);

		runLoaders(
			{
				resource: this.resource,
				loaders: this.loaders,
				context: loaderContext,
				readResource: fs.readFile.bind(fs)
			},

2. webpack中plugin的运行时机
   webpack依赖于Tapable核心库，是一个流程控制中心。webpack的核心思想也是通过这个流程控制在整个编译周期内执行不同类型的内置插件和我们配置的外部插件来完成的。所以说plugin的运行时机是贯穿在整个编译的生命周期内的，通过插件注册时挂载的钩子来判断运行时机。

参考：
webpack打包流程及源码解析
webpack输入命令回车后都发生了什么
webpack的loader详解系列1,2,3