Webpack --watch 和启动 nodemon？

Question

感谢@McMath 的 出色回答，我现在可以通过 webpack 编译我的客户端和服务器。我现在正在尝试使 webpack --watch 有用。理想情况下，我希望它在捆绑更改时为我的服务器进程生成类似 nodemon 的东西，并在我的客户端更改时生成一些浏览器同步。

我意识到它是一个捆绑器/加载器，而不是真正的任务运行器，但是有什么方法可以实现这一点吗？缺少谷歌结果似乎表明我正在尝试一些新的东西，但这一定已经完成了..

我总是可以将 webpack 包放到另一个目录中并使用 gulp 来观看它/复制它/浏览器同步它，但这似乎是一个 hack.. 有更好的方法吗？

原文由 XeroxDucati 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

遇到了同样的问题，找到了下一个解决方案—— webpack-shell-plugin 。它

允许你在 webpack 构建之前或之后运行任何 shell 命令

所以，这就是我在 package.json 中的脚本：

 "scripts": {
      "clean": "rimraf build",
      "prestart": "npm run clean",
      "start": "webpack --config webpack.client.config.js",
      "poststart": "webpack --watch --config webpack.server.config.js",
}

如果我运行“启动”脚本，它会启动下一个脚本序列：clean -> start -> poststart。还有’webpack.server.config.js’的一部分：

 var WebpackShellPlugin = require('webpack-shell-plugin');

...
if (process.env.NODE_ENV !== 'production') {
    config.plugins.push(new WebpackShellPlugin({onBuildEnd: ['nodemon build/server.js --watch build']}));
}
...

“onBuildEnd”事件仅在首次构建后触发一次，重建不会触发“onBuildEnd”，因此 nodemon 按预期工作

原文由 Jonik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

1. 安装以下依赖项：

npm install npm-run-all webpack nodemon

1. 将您的 package.json 文件配置为如下所示：

package.json

 {
  ...

  "scripts": {
    "start"        : "npm-run-all --parallel watch:server watch:build",
    "watch:build"  : "webpack --watch",
    "watch:server" : "nodemon \"./dist/index.js\" --watch \"./dist\""
  },

  ...

}

这样做之后，您可以使用 npm start 轻松运行您的项目。

不要忘记为 webpack 配置 WatchIgnorePlugin 以忽略 ./dist 文件夹。

依赖关系

1. npm-run-all 一个 CLI 工具，用于并行或顺序运行多个 npm 脚本。
2. webpack webpack 是一个模块打包器。它的主要目的是捆绑 JavaScript 文件以便在浏览器中使用，但它也能够转换、捆绑或打包几乎任何资源或资产。
3. nodemon - 在开发 node.js 应用程序期间使用的简单监控脚本。

原文由 Ling 发布，翻译遵循 CC BY-SA 3.0 许可协议