结论先行:
Webpack 的运行流程是⼀个串⾏的过程,从启动到结束大概会经历以下流程:
初始化参数:读取与合并所有的配置参数,加载所有的插件(Plugin),实例化 Compiler 对象并调用 run
方法启动编译。
① 初始化参数:从配置⽂件和 Shell 语句中读取与合并参数,得出最终的参数;
② 开始编译:⽤上⼀步得到的参数初始化 Compiler 对象,加载所有配置的插件,执⾏对象的 run ⽅法开始执⾏编译;
编译模块:从 Entry 入口文件出发,调⽤所有配置的 Loader 对模块进⾏翻译,再找到该模块依赖的模块,递归地进行编译处理
再根据 module.rules 里配置的 loader 进行相应的转换处理,对 model 转换后在解析出module 依赖的其他模块,解析出一个一个的 chunk ( model 进行分组),最后所有的 chunk会转换成文件输出的 output
③ 确定⼊⼝:根据配置中的 entry 找出所有的⼊⼝⽂件;
④ 编译模块:从⼊⼝⽂件出发,调⽤所有配置的 Loader 对模块进⾏翻译,再找出该模块依赖的模块,再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理;
⑤ 完成模块编译:在经过第4步使⽤ Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
输出资源:将编译后的模块组合成 Chunk,将 Chunk 转换成文件,输出到文件系统中
⑥ 输出资源:根据⼊⼝和模块之间的依赖关系,组装成⼀个个包含多个模块的 Chunk,再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表,这步是可以修改输出内容的最后机会;
⑦ 输出完成:在确定好输出内容后,根据配置确定输出的路径和⽂件名,把⽂件内容写⼊到⽂件系统。
在整个构建流程中,webpack会在恰当的时机执行 plugin 里定义的那些插件,从而完成 plugin 插件里的任务。
在以上过程中,Webpack 会在特定的时间点⼴播出特定的事件,插件在监听到感兴趣的事件后会执⾏特定的逻辑,并且插件可以调⽤ Webpack 提供的 API 改变 Webpack 的运⾏结果。
具体分析:
webpack 的运⾏流程是⼀个串⾏的过程,从启动到结束会依次执⾏以下流程:
1、初始化参数
从配置文件和 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;
2、开始编译
完成上述步骤之后,则开始初始化 Compiler
编译对象。该对象掌控着 webpack
声明周期,不执行具体的任务,只是进行一些调度工作。
初始化完成后会调用 Compiler
的 run
方法
来真正启动 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
,初始化时定义了很多钩子函数
3、确定入口
根据配置中的 entry
找出所有的入口文件
module.exports = {
entry: './src/file.js'
}
4、编译模块
从 Entry 发出,针对每个 Module 串行调用对应的 Loader 去翻译文件内容,再找到该 Module 依赖的 Module,递归地进行编译处理。
5、完成模块编译
在经过第4步使⽤ Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
6、输出资源
对编译后的 Module 组合成 Chunk,把 Chunk 转换成文件,输出到文件系统。
根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk
,再把每个 Chunk
转换成一个单独的文件加入到输出列表。
7、输出完成
在确定好输出内容后,根据配置确定输出的路径和文件名:
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
}
注意:
在
Compiler
开始生成文件前,钩子emit
会被执行,这是我们修改最终文件的最后一个机会从而
webpack
整个打包过程则结束了。