根据 WebStorm，他们要求我们根据以下指定的 dist 目录进行调试：https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/
但是，根据 Webpack 建议的开发过程，我们应该运行 webpack-dev-server，所以它在内存中如下：
webpack-dev-server -inline -progress -colors -display-error-details -display-cached -hot -port=3000
所以没有 dist 目录，这个例子发布了@：https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/
有没有办法让 webpack-dev-server 使用 dist dir 所以可以将 WebStorm 映射到它，以便我们可以使用源映射进行实时调试？
仅供参考我这是我用来测试的项目：
https://github.com/ocombe/ng2-webpack
TX
肖恩
4 回答
目前，WebStorm 需要从 WebPack 创建的 Bundle SourceMap 来分析它并找到实际的断点。
简而言之，您无法仅使用 WebPack DevServer 调试 WebPack 应用程序。但是，您可以运行正常的 WebPack 构建，并与文件并行查看：`
如您所知，您必须使用源映射创建 distribution/production 包，然后在 WebStorm 中使用它进行调试。就个人而言，当我运行 webpack-dev-server 时，我会使用 Karma 运行测试。可以使用调试器运行 Karma 测试，这通常可以满足我的任何调试需求，而 webpack-dev-server 提供我的“手动测试”以查看我的工作情况。
我想我的意思是你的情况......你可以让 dev 服务器运行，同时，有一些自动构建，源代码地图在你可以运行的同一时间运行并使用调试器上。这可能是密集的，因此它取决于您的内存和处理能力。
我最终使用 live-server https://github.com/tapio/live-server并按照本教程，工作... https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/(只是不能在 webpack 中使用内置服务器，但没关系)
我想补充一点，你可以把声明
调试;
在你的 javascript/typescript 文件中甚至在 angular 或 vue2 的框架文件中，如* .vue
因此，即使您的路径映射到 URL 不起作用，它仍然会步进。