是什么

初始化流程 --> 编译构建流程 --> 输出流程

运行流程

webpack的运行流程是一个将各个插件串联起来的串行流程 !()[https://vblog-1256630012.cos.ap-chengdu.myqcloud.com/app-blog/640.webp]

初始化流程

从配置文件和shell（命令行）中读取与合并参数，并初始化插件所需参数

• 默认配置文件webpack.config.js, 也可以指定

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()
  ]
};

• 初始化Compiler

初始化时定义了很多钩子函数

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;
}
...

编译构建流程

从Entry出发， 针对每个Module 串行调用对应的loader去转换内容，再找到该Module所依赖的的Module，递归的进行编译处理

初始化后会调用Compiler中的run来真正启动webpack编译构建流程，主要流程如下：

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

compile 编译主角

执行run方法后，首先触发compile, 主要构建一个Compilation对象, 该对象是编译阶段的主角，主要执行以下流程： 执行模块创建、依赖收集、分块、打包等

make 开始编译模块

从入口文件开始读取，主要执行_addModuleChain()函数

_addModuleChain(context, dependency, onModule, callback) {
   ...
   // 根据依赖查找对应的工厂函数
   const Dep = /** @type {DepConstructor} */ (dependency.constructor);
   const moduleFactory = this.dependencyFactories.get(Dep);
   
   // 调用工厂函数NormalModuleFactory的create来生成一个空的NormalModule对象
   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();
       })
   })
}

过程如下：

_addModuleChain中接收参数dependency传入的入口依赖，使用对应的工厂函数NormalModuleFactory.create方法生成一个空的module对象

回调中会把此module存入compilation.modules对象和dependencies.module对象中，由于是入口文件，也会存入compilation.entries中

随后执行buildModule进入真正的构建模块module内容的过程

build-module 模块编译

• 调用loaders，将模块编译成标准的js模块

• 使用acorn解析转换后的内容，输出对应的抽象语法树AST

• 从入口开始，分析其AST,当遇到require等导入其他模块语句时，将其加入依赖模块，并递归依赖模块，最终高清所有的依赖关系

• 重要的包

1. babel/parser：用于将源码生成AST
2. @babel/traverse：对AST节点进行递归遍历
3. babel-core/@babel/preset-env：将获得的ES6的AST转化成ES5

输出流程

对编译后的Module组合成chunk，把chunk转换成文件，输出都目标文件系统

seal

主要是生成chunks,并对chunks进行一系列的优化，并生成要输出的代码

webpack中chunks: 可以理解成配置entry中的模块或者动态引入的模块

根据入口和模块之间的依赖关系，组装成包含一个或多个模块的chunk，再把每一个chunk转换成单独的文件，输出到文件列表

emit

在 Compiler 开始生成文件前，钩子 emit 会被执行，这是我们修改最终文件的最后一个机会

output: {
    path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
}

参考

参考 (opens new window) 简易webpack (opens new window)