Webpack 是前台开发的常用工具。

在使用 Webpack 的时候，我们经常会引入额外的 loader 和 plugin 来定制构建过程。而有些 loader 和 plugin 支持传入函数，来提供运行时配置。比方，webpack-manifest-plugin 插件的 options.filter 选项。

涉及到 webpack 运行时调用，那就离不开代码调试。

本文就向大家详情，如何用 VSCode 调试 Webpack。

假如你不理解 VSCode 的调试功能，可以先阅读：VSCode 调试 Node.js 指南

准备调试用例

用例已经准备好了，可以直接从 github clone 下来。
concefly/vscode-tutorial/tree/master/webpack-debug

调试用例

配置 VSCode 调试功能

通常情况下，我们会在 package.json script 里配 "build": "webpack --config webpack.config.js"，而后执行 npm run build 来进行 webpack 构建。

但假如要用 vscode 调试的话，就不能这么配了，而是要改成 "build": "node --inspect-brk=5858 ./node_modules/.bin/webpack --config webpack.config.js"。--inspect-brk 是调试端口号，传给 node 进程后，node 就能对外暴露调试端口，进而在 VSCode 里调试。

而后，我们修改一下 .vscode/launch.json 文件，配置调试参数。

{  "version": "0.2.0",  "configurations": [    {      "type": "node",      "request": "launch",      "name": "Build",      "runtimeExecutable": "npm",      "runtimeArgs": ["run", "build"],      "port": 5858    }  ]}

有几个参数比较重要：

1. runtimeExecutable: 程序执行器，就是启动程序的脚本。默认是 node，但我们这里用 npm 来启动 webpack build 指令，所以这里要配 npm
2. runtimeArgs: 传递给程序执行器的参数
3. port: node 调试端口号，和刚才在 package.json script 中配的 --inspect-brk 保持一致

启动调试

package.json script 和 .vscode/launch.json 都配置妥当后，我们在 ManifestPlugin 的 filter 函数里打一个断点，而后进入调试模式。

可以看到，VSCode 停在了断点处，表明调试 webpack 成功了。

启动调试

其余

1. 假如要深入定制 webpack，基本绕不开 webpack 的 asset、chunk、module 这些概念和参数传递。但是官方文档并没有详细解释这些概念，一切都需要开发者自己了解和实践。编写 webpack 配置的同时用 VSCode 调试配置脚本，随时断点随时观察 ，能极大提高效率。
2. 一般 npm 脚本的调试方法也可以参考此文章