IntelliJ IDEA：如何创建调试 webpack 的断点？答案

【问题标题】：IntelliJ IDEA: How can I create an breakpoint that debug webpack?IntelliJ IDEA：如何创建调试 webpack 的断点？
【发布时间】：2023-03-29 16:55:02
【问题描述】：

使用 Intellij IDEA 的调试工具进行 webpack，

操作系统：MAC

npm 脚本：

"scripts": {
    "dev": " webpack-dev-server --inline --hot --display-error-details  --content-base   --config mvvm/build/webpack.dev.conf.js",
}

提示：

To debug "build-distributor" script, make sure $NODE_DEBUG_OPTION string is specified as the first argument for node command you'd like to debug.

 For example:

{ "start": "node $NODE_DEBUG_OPTION server.js" }

问题：

在哪里添加这段代码（$NODE_DEBUG_OPTION）？

【问题讨论】：

标签： node.js intellij-idea webpack javascript-debugger

【解决方案1】：

Package.json 配置

首先你必须像这样创建一个新的调试脚本：

"debug": "node $NODE_DEBUG_OPTION node_modules/.bin/webpack-dev-server --config ./path/to/webpack.config.js"

webpack 配置

你必须添加这个命令行：

devtool: 'eval-source-map'

编辑器配置

然后您必须配置您的 IDE：还有这个：

【讨论】：