likes
comments
collection
share

webpack 流程解析（1）：小弟先帮我看看对不对之 weback-cli

作者站长头像
站长
· 阅读数 17

前言

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 做的事情并不多。简单说就一句话，准备好参数。同时也有一些性能优化的手段，这些不在本次系列的讨论范围内，以后有时间再和大家分享