webpack

[huoxiangdong]

PLUGIN

• webpack就是完成一个又一个任务而完成整个打包构建过程
• make是最开始的起点, complie就是编译任务点，after-complie是编译完成，emit是即将准备生成文件，after-emit是生成文件之后等
• compilation，它继承于compiler，所以能拿到一切compiler的内容（所以你也会看到webpack的options），而且也有plugin函数来接入任务点

[huoxiangdong]

module.exports = {
    entry: '', // 入口文件
    output: {}, // 出口文件
    module: {}, //模块配置
    plugins: [], // 对应的插件
    devServer: {}, // 开发服务器配置
    mode: 'development' // 模式配置
    context: //工程路径   
}

[huoxiangdong]

核心对象compilation

• compiler.run 后首先会触发 compile ，这一步会构建出 Compilation 对象
• 一是负责组织整个打包过程，包含了每个构建环节及输出环节所对应的方法，可以从图中看到比较关键的步骤，如 addEntry() , _addModuleChain() , buildModule(),seal() ,createChunkAssets() (在每一个节点都会触发 webpack 事件去调用各插件)
• 二是该对象内部存放着所有 module ，chunk，生成的 asset 以及用来生成最后打包文件的 template 的信息

[huoxiangdong]

AST

• abstract syntax tree 抽象语法树

[huoxiangdong]

webpack 的实际入口是 Compiler 中的 run 方法，run 一旦执行后，就开始了编译和构建流程 ，其中有几个比较关键的 webpack 事件节点。

• compile 开始编译
• make 从入口点分析模块及其依赖的模块，创建这些模块对象
• build-module 构建模块
• after-compile 完成构建
• seal 封装构建结果
• emit 把各个chunk输出到结果文件
• after-emit 完成输出

[huoxiangdong]

• loader：能转换各类资源，并处理成对应模块的加载器。loader 间可以串行使用。
• chunk：code splitting(代码分割) 后的产物，也就是按需加载的分块，装载了不同的 module
• plugin：webpack 的插件实体

[huoxiangdong]

• compilation.plugin(‘xxx’, callback) : 事件绑定

[huoxiangdong]

执行过程

• ./node_modules/.bin/webpack --> ./node_modules/webpack/bin/webpack.js
• 实际入口是Compiler 中的 run 方法，run 一旦执行后，就开始了编译和构建流程

[huoxiangdong]

关键事件

• compile开始编译
• make 从入口点分析模块及其依赖的模块，创建这些模块对象
• build-module 构建模块
• after-compile 完成构建
• seal 封装构建结果
• emit 把各个chunk输出到结果文件
• after-emit 完成输出

[huoxiangdong]

模块构建

Compiler -> make 
         -> Compilation.addEntry -> options 对象的 entry 字段找到入口js文件
                                 -> _addModuleChain
                                   -> 一是根据模块的类型获取对应的模块工厂并创建模块
                                   -> 二是构建模块

• 构建模块
  • 调用各 loader 处理模块之间的依赖
  • doBuild() -> 对每一个 require() 用对应的 loader 进行加工，最后生成一个js module
  • 调用acorn 解析经loader 处理后的源文件生成抽象语法树 AST
  • 遍历 AST，构建该模块所依赖的模块