webpack 流程解析(1):创建compiler之前

前言

compiler对象是一个全局单例,它负责把控整个webpack打包的构建流程。
本文将会介绍在 new compiler 之前,webpack做了什么

启动webpack

通常情况下,我们使用如下方式来启动webpack

// package.json
script: {
   "start": "webpack"
}

webpack/bin

运行 npm run start 之后,会先进入 webpack/bin 下, webpack使用

isInstalled("webpack-cli")

来判断是否安装了cli, 没安装会使用 yarn 或者 npm 帮你安装,最后会走到runCli这个方法,核心代码就一句

require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));

这里去读取 webpack-cli/bin/cli.js

webpack-cli/bin

webpack-cli/bin/cli.js 居然还要判断一下是否安装了 webpack(上面不是判断过了), 如果没安装再帮你安装一下,然后就是实例化一个 webpack-cli 对象,执行实例的run方法。
这里面代码就不细说了,其实就干了两件事:

  • 拿到process.args 的参数,校验
  • 合并参数,针对args的值给webpack的config增加对应的plugin

最后拿到了参数又调用了webpack

这里用了两个包来提高运行效率,一个是 import-local,用于优先使用本地文件,另一个是 v8-compile-cache, 用来做 v8 的编译缓存优化。后续我们再聊这两个

回到webpack

回到webpack之后呢,就要开始创建 compiler 实例啦,在这之前,其实也会有一点分支逻辑需要处理

  • 如果参数是一个数组,就创建MultiCompiler实例, 否则就创建一个Compiler的实例。
  • 参数的校验和复制默认值

一切都走完之后,就要开始创建 compiler 对象了。

结语

在创建 compiler 对象之前 webpack 做的事情并不多。简单说就一句话,准备好参数。同时也有一些性能优化的手段,这些不在本次系列的讨论范围内,以后有时间再和大家分享

你可能感兴趣的