系统环境

macOS Sierra v10.12.3
Node.js v6.9.2
npm v4.1.1
yarn v0.18.1
webpack v1.14.0

相关链接

webpack 源码解读:命令行输入webpack的时候都发生了什么?
细说 webpack 之流程篇
webpack源码分析(一)— Tapable插件架构
Tapable中文文档
Webpack 源码(一)—— Tapable 和 事件流
Webpack 源码(二)—— 如何阅读源码

安装 webpack

本地 yarn/npm 安装 v1.14.0/v1.13.3(现在 webpack 已经默认是 v2,所以需要制定 v1 的版本号)
sudo yarn add webpack@1.14.0
sudo npm install webpack@1.14.0

创建 webpack.config.js 和 entry.js

其中 webpack.config.js 中的 module.exports 暴露一个 webpack 编译对象(webpack compiler object)

webpack.config.js

1
2
3
4
5
6
7
// webpack compiler object
module.exports = {
entry: './entry.js',
output: {
filename: './bundle.js'
}
}

entry.js(什么都不需要输入)


在终端执行 webpack CLI 时发生了什么?

  1. 会去全局命令行列表中找 webpack 命令,如果没有找到,则 bash 提示 webpack: command not found。
  2. 由于我们上面并没有在全局环境安装 webpack,所以命令行列表中并没有 webpack 命令。所以我们需要执行本地的 webpack 命令,即 ./node_modules/.bin/webpack。
  3. 也就是说我们是通过直接执行 ./node_modules/.bin/ 目录的 webpack 文件(无文件后缀名),来启动 webpack。
  4. 而 ./node_modules/.bin/ 目录的 webpack 文件,其实是 node_modules/webpack/bin/webpack.js 的一个符号链接,也就是说最终我们执行的是 ./node_modules/webpack/bin/webpack.js。

通过 WebStorm 自带的 debug Node.js 功能,可以直观的查看 webpack 执行过程

知道上面我们就可以在 WebStorm 中通过调试查看,我们不需要在命令行输入./node_modules/.bin/webpack --config webpack.config.js
配置方法如下,在当前项目下,打开:
导航栏 -> Edit Configurations -> Run/Debug Configurations -> “+” -> Add New Configuration -> Node.js
-> 对应文本框输入
1)Name:debug webpack
2)JavaScript file:node_modules/.bin/webpackJavaScript file:node_modules/webpack/bin/webpack.js
3)Application parameters:--config webpack.config.js
-> OK

开始调试

在 ./node_modules/webpack/bin/webpack.js 的 path = require(“path”); 这一行处打一个断点,然后点击”Debug Selected Configuration”(爬虫图标)。
WebStorm debug Node.js 的官方教程此处不再详述,请查看

哦了,这样我们就可以愉快地开始我们的 webpack 调试之旅了。