webpack|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 对象了。
结语 【webpack|webpack 流程解析(1)(创建compiler之前)】在创建 compiler 对象之前 webpack 做的事情并不多。简单说就一句话,准备好参数。同时也有一些性能优化的手段,这些不在本次系列的讨论范围内,以后有时间再和大家分享

    推荐阅读