如何使用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 dir，这样可以将WebStorm映射到它，这样我们就可以使用源映射进行实时调试了？

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

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

TX

肖恩

Answer 1

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

简而言之，您无法使用WebPack DevServer 调试WebPack应用程序 。但是，您可以运行正常的WebPack构建，并与文件并行查看：`

Answer 2

如您所知，您必须使用源映射创建分发/生产捆绑包，然后在WebStorm中使用它进行调试。就个人而言，当我运行webpack-dev-server时，我用Karma运行测试。可以使用调试器运行Karma测试，这通常可以满足我的任何调试需求，而webpack-dev-server提供我的＆＃34;手动测试＆＃34;看看我是怎么做的。

我想我正在为你的案例说些什​​么......你可以让dev服务器运行，同时，你可以在同一时间运行源映射的某种自动构建运行并使用调试器。这可能很密集，但这取决于你的记忆力和处理能力。

Answer 3

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

Answer 4

我想补充说你可以把声明放在

<强>调试器;

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

因此，即使您的路径映射到URL不起作用，它也会继续步进。