webpack 源码阅读（一）：webpack 启动

本文开始将深入探索webpack的工作细节。如果你也是第一次尝试了解细节，建议先看另外一篇文章tapable的用法，这个小小的库将贯穿整个webpack的始终。调度着各种模块构建有条不紊的进行。

本篇我们探索当我们执行webapck 命令后发生了什么？
本文webpack 源码阅读基于webpack 4.x

新建一个文件夹，初始化npm，安装webpack 和webpack-cli

npm i -D webpack
npm i -D webpack-cli

新建一个webpack.config.js 文件
先忽略大部分配置细节，只配置一个入口文件

module.exports = {
     
    entry: './index.js'
};

创建一个index.js 文件 和一个test.js 文件

// index.js
import {
      add } from './test'

const a = add(1,2)
console.log(a)

// test.js
export function add (a, b) {
     
    return a + b
}

好，准备就绪，启动node 调试模式

node --inspect-brk node_modules/.bin/webpack

打开浏览器调试模式

点击inspect，默认会在首行断点，接下来我们就可以像调试前端js一样一行行的看node执行过程了

在这个文件里，webpack主要做了两件事

1. 检测是否安装了webpack-cli
2. 如果没有装，采用交互的方式引导你安装webpack-cli
3. 如果你装了，通过require 引入webpack-cli/bin/cli.js

好像到这里就结束了，webpack-cli 引入了，啥也没干？
我们到webapck-cli/bin/cli.js 开头打个断点

webpack-cli 采用了一个自执行函数，也就是当前require webpack-cli 的时候，这个自执行函数就开始工作了。

webpack-cli 的主要工作：

1. 解析处理webpack 传入的各种命令行参数
2. 创建compiler对象
3. 执行compiler
   
   当然也会挂载一些钩子函数。
   
   执行compiler
   

好了，当我们执行webpack命令的时候，基本上就发生了这几个比较大的流程。

最后还有一个问题。我们只是执行了webpack，webpack是怎么知道去读取webpack.config.js的呢？
在webpack-cli/bin/cli.js文件下，
options 是读取的 ./utils/convert-argv 这个模块的，所以肯定在这里有一个默认配置

./utils/convert-argv

接下来，通过这一流程，我们可以探索出各种参数的作用。