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

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

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

本文就向大家介绍，如何用 VSCode 调试 Webpack。

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

---

准备调试用例

用例已经准备好了，可以直接从 github clone 下来。
https://github.com/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 脚本的调试方法也可以参考此文章