webpack watch 触发时如何运行并发脚本？答案

【问题标题】：How do I run concurrent scripts when webpack watch fires?webpack watch 触发时如何运行并发脚本？
【发布时间】：2017-08-29 23:13:07
【问题描述】：

背景

我目前有一个类似于

的 npm 脚本

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

从逻辑上讲，这会并行运行 webpack、启动应用、lints 和测试。

该脚本中的 npm webpack 具有 --watch 集

注意：这是给开发者的。

问题

这会尝试在 webpacked 之前运行应用程序
当 webpack 由于 watch 重新打包时，这不会重新运行应用程序

目标

运行一次npm run webpack
当它输出时（意味着手表被触发并完成）运行其他三个命令
当发生崩溃通知我时，不要浪费时间运行不起作用的东西，而是在我修复文件后重试。

真正的问题

我不知道我不知道什么。我怀疑真正的答案可能在 webpack 配置本身中，或者有一个比并发/监视我的用例更好的工具，或者关于我如何设计它的核心思想简直太疯狂了。也许我想创建一个使用 webpack 开发中间件来提供这些服务的 devServer.js？那将如何进行 linting 和测试呢？

我不知道这个版本的漂亮版本会是什么样子。

我真正需要的东西

关于“应该”如何进行的精彩教程/指南/博客文章。

【问题讨论】：

标签： concurrency npm build webpack npm-scripts

【解决方案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。 onchange 监控dist/ 中的任何文件更改，并在任何文件更改时运行您的任务。

这种方法的局限性在于，在dist 中的文件发生更改之前，您的任务将不会运行。您可以通过在运行 webpack 之前删除 dist/ 来解决此问题。（使用rimraf 以跨平台方式执行此操作。）示例：

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

如果您不关心 Windows 支持，您可以使用 rm -rf dist。

【讨论】：