如何使用 WebStorm 调试 Webpack-dev-server（在内存中）？

Question

根据 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 目录，以便可以将 WebStorm 映射到它，以便我们可以使用源映射进行实时调试？

仅供参考，这是我用来测试的项目：

https://github.com/ocombe/ng2-webpack

发送

肖恩

Answer 1

我要补充的是，你可以把声明

调试器；

在您的 javascript/typescript 文件中，甚至在 angular 或 vue2 的框架文件中，例如 *.vue

因此，即使您到 URL 的路径映射不起作用，它仍然会执行。

Answer 2

目前 WebStorm需要从 WebPack 中创建的 Bundle + SourceMap 来分析它并找到实际的断点。

简而言之，您不能使用 WebPack DevServer 调试 WebPack 应用程序只是。但是，您可以运行正常的 WebPack 构建，同时进行文件监视：`

Answer 3

我最终使用了实时服务器 https://github.com/tapio/live-server 并按照本教程进行操作... https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ （只是不能使用 webpack 中的内置服务器，但没关系）

Answer 4

如您所知，您必须使用源映射创建分发/生产包，然后在 WebStorm 中使用它进行调试。就个人而言，我在运行 webpack-dev-server 的同时使用 Karma 运行测试。 Karma 测试可以使用调试器运行，通常可以满足我的任何调试需求，而 webpack-dev-server 提供我的“手动测试”以查看我的表现。

我猜我是说你的情况......你可以让开发服务器运行，同时运行某种自动构建，同时运行源映射，你可以运行并且使用调试器。不过这可能会很密集，因此取决于您的内存和处理能力。