npm - WebStorm "Before Launch"– 等待完成

Question

我正在尝试设置这个(有点荒谬)堆栈:

• bundler :Webpack
• 库:ReactJS
• 语言:TypeScript + JSX (tsx)
• IDE:WebStorm

现在，这一切都工作正常，直到我意识到我的应用程序没有由 WebStorm 编译，除非我在运行应用程序之前手动运行 webpack 命令。

接下来我尝试的是编辑运行/调试配置(JavaScript 调试)，以在“启动之前”将 webpack 作为外部工具运行。请注意“之前”。

这一切也都工作正常，直到我然后意识到 WebStorm 正在异步启动 webpack 并在启动后立即运行应用程序，这意味着自上次编译以来没有保存任何更改(因为 webpack 在应用程序运行之前没有时间完成编译)!

“很简单”，天真的我想，“我所要做的就是切换‘等待完成’复选框，它肯定存在!”但与往常一样，事实并非如此。我找不到这样的复选框。

大约 30 分钟和一些脑细胞之后，我就在这里。现在的问题是:

如何在 WebStorm 中运行 Webpack 应用程序之前对其进行编译？

---

到目前为止我已经尝试过:

• 将 webpack 命令添加到我的运行/调试配置的“启动之前”部分。如上所述，WebStorm 不会等待其完成后再运行应用程序，而是运行以前的版本。
• 配置 NPM build 脚本以仅运行 webpack，然后将该添加到“启动前”部分。同样的问题。现在我开始怀疑“启动前”部分中的任何内容是否同步运行......

到目前为止我还没有尝试过什么(以及原因):

• 创建一个运行 webpack 的自定义 NPM run 脚本，然后启动调试器。这远非理想，因为(据我所知)使用 WebStorm 调试器来实现这一点非常困难。
• 每次调试前手动运行webpack。嗯，我已经尝试过并且有效；但我希望大家很清楚为什么这不是一个好的长期解决方案。
• 手动将每个脚本包含在我的 HTML 中。随着应用程序的发展，我可能会有更多的脚本，并且我不期待将每个脚本手动添加到 HTML 中，以便我可以更轻松地调试它们。

我对任何解决方案持开放态度，包括那些建议 Webpack 替代方案的解决方案(但是 WebStorm、ReactJS 或 Typescript 的任何替代方案都必须非常好，因为我已经将选择这些时花了很多心思)。

Answer 1

已知问题，请关注WEB-21022用于更新。问题并非特定于 webpack，唯一的解决方法是在启动应用程序之前手动运行 webpack(通过运行配置或外部工具)。请注意，我无法在调试时重新创建它，只能在运行应用程序时重新创建它