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

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

本篇我们探索的主要目标

1. 如何调试webpack
2. webpack 和webpack-cli 如何配合工作的
3. webpack的最基本的流程

PS：本文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
}

1. 如何调试webpack
   webpack代码是由node编写的，所以调试的方式和调试node是一样的，chrome支持了我们像调试前端代码一样的inspect模式：

• 启动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
   
   compiler 内部将会按照我们的配置以及webpack的默认配置开始对我们的项目进行各种打包操作。
   好了，这是我们启动一个最简单的webpack命令，发生的最基础的事情。后续会继续深入探讨更多的webpack compiler 的处理逻辑。

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

./utils/convert-argv

所以不光是webpack.config.js能被识别， webpackfile.js 也是可以起到相同作用的。

有了这个入口的基础，我们可以通过这一调试流程，探索出各种参数的作用和使用技巧。