- webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来
- 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好
从启动到结束会依次执行以下三大步骤：
- 初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数
- 译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理
- 输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统
初始化流程
- 配置文件默认下为webpack.config.js，也或者通过命令的形式指定配置文件，主要作用是用于激活webpack的加载项和插件
var path = require('path');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');var node_modules = path.resolve(__dirname, 'node_modules');
module.exports = {
entry: './path/entry/index.js'，
resolve: {
alias: {
'react': pathToReact
}
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
loader。
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
],
noParse: [pathToReact]
},
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/index.js'
}初始化完成后会调用Compiler的run来真正启动webpack编译构建流程，主要流程如下：
- compile 开始编译
- make 从入口点分析模块及其依赖的模块，创建这些模块对象
- build-module 构建模块
- seal 封装构建结果
- emit 把各个chunk输出到结果文件
输出流程
- seal 输出资源
seal方法主要是要生成chunks，对chunks进行一系列的优化操作，并生成要输出的代码
webpack 中的 chunk ，可以理解为配置在 entry 中的模块，或者是动态引入的模块
根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表
- emit 输出完成
在确定好输出内容后，根据配置确定输出的路径和文件名
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
}在 Compiler 开始生成文件前，钩子 emit 会被执行，这是我们修改最终文件的最后一个机会
