

webpack 流程解析(1):创建compiler之前
source link: https://segmentfault.com/a/1190000040774804
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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
实例啦,在这之前,其实也会有一点分支逻辑需要处理
- 如果参数是一个数组,就创建单个compiler实例, 否则就创建一个。
- 参数的校验和复制默认值
一切都走完之后,就要开始创建 compiler 对象了。
在创建 compiler
对象之前 webpack 做的事情并不多。简单说就一句话,准备好参数。同时也有一些性能优化的手段,这些不在本次系列的讨论范围内,以后有时间再和大家分享
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK