webpack源码之调试准备

前言

webpack作为目前前端最热门的构建工具之一，webpack的源码逻辑是非常复杂的，实际上webpack系列的源码文章也是针对其流程尽可能去挖掘，旨在加深学习其思想以及相关概念。
本系列文章的webpack版本是3.4.0。首先从调试准备开始，会通过一些简单实例来学习webpack打包流程。

调试准备

创建一个最小的实例demo，具体定义如下：

创建package.json文件

webpack是运行在Node.js环境的打包工具，npm包需要package.json描述文件。

npm init

创建描述文件后，添加webpack@3.4.0依赖。

npm install webpack@3.4.0 --save-dev

定义scripts

在package.json定义scripts中相关命令，具体如下：

"scripts": {
	"build": "webpack --config webpack.config.js",
    "debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js --config webpack.config.js"
}

定义build命令用于构建打包输出最后的文件，定义debug命令用于调试webpack源码。

定义webpack配置文件

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

这是一个入门级的配置，只定义入口和输出文件位置和文件名。需要在当前目录下额外创建index.js文件作为打包入口文件。

如何调试源码

定义了debug命令，直接执行该命令就行：

npm run debug

在浏览器输入：chrome://inspect/#devices 或者 开发者工具快捷入口就可以进行源码调试。
想要快速跳转到指定代码部分，可以在源码中添加debugger。

debugger
processOptions(options);