从本文开始起将深入探索webpack的工作细节。如果你也是第一次尝试了解webpack源代码细节,建议先看另外一篇文章tapable的用法,这个小小的库将贯穿整个webpack的始终。调度着各种模块构建有条不紊的进行。
本篇我们探索的主要目标
- 如何调试webpack
- webpack 和webpack-cli 如何配合工作的
- 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
}
- 如何调试webpack
webpack代码是由node编写的,所以调试的方式和调试node是一样的,chrome支持了我们像调试前端代码一样的inspect模式:
- 启动node 调试模式
node --inspect-brk node_modules/.bin/webpack
- 打开浏览器调试模式
- 点击inspect,默认会在首行断点,接下来我们就可以像调试前端js一样一行行的看node执行过程了
在这个文件里,webpack主要做了两件事
- 检测是否安装了webpack-cli
- 如果没有装,采用交互的方式引导你安装webpack-cli
- 如果你装了,通过require 引入webpack-cli/bin/cli.js
好像到这里就结束了,webpack-cli 引入了,啥也没干?
我们到webapck-cli/bin/cli.js 开头打个断点
webpack-cli 采用了一个自执行函数,也就是当前require webpack-cli 的时候,这个自执行函数就开始工作了。
webpack-cli 的主要工作:
- 解析处理webpack 传入的各种命令行参数
- 创建compiler对象
- 执行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 也是可以起到相同作用的。
有了这个入口的基础,我们可以通过这一调试流程,探索出各种参数的作用和使用技巧。