如何运行并发脚本的WebPack手表火灾时？

Question

背景

我现在有一个NPM脚本，看起来像

"dev":"yarn install && concurrently -k \"npm run webpack\" \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""

逻辑上，这运行的WebPack，并行启动应用，绒毛和测试。

在该脚本NPM的WebPack有--watch集

注：这是为开发。

存在的问题

• 这种尝试运行该应用程序已webpacked前
• 这不会重新运行应用程序时，由于重新包装的WebPack观看

目标

• 运行npm run webpack一次
• 当它输出（指手表发射和成品）运行其他三个命令
• 当崩溃的东西告诉我，不要浪费时间运行的东西，将无法正常工作，但再试一次，当我修复文件。

真正的问题

我不知道是什么我不知道。我怀疑真正的答案将在配置的WebPack本身潜在的，或还有比同时性能更好，工具/看我的使用情况，或就如何我设计这只是疯狂的核心理念。也许我想创建一个使用的WebPack开发的中间件，而不是为这些一devServer.js？怎么会是拉在起绒和测试呢？

我不知道这个版本的一个美丽的版本会是什么样子。

我真正需要的

一个伟大的教程/指南/博客张贴有关如何“应该”去。

Answer 1

这里是我会做什么;也许有一个更好的方法：

"scripts": {
  "dev": "yarn install && concurrently -k \"npm run webpack\" \"npm run watch\"",
  "watch": "onchange \"dist/**/" -- concurrently -k \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""
}

这使用onchange。 npm run dev的WebPack开始和并联的onchange。在dist/任何文件更改平变化监测和运行你的任务时，任何文件发生改变。

这种方法的限制是，你的任务将无法运行，直到文件dist改变。您可以通过运行的WebPack之前删除dist/解决这个问题。 （使用rimraf为此在跨平台的方式。）例：

"dev": "yarn install && rimraf dist && concurrently -k \"npm run webpack\" \"npm run watch\""

你可以只用rm -rf dist如果你不关心Windows的支持。