Webpack – 观看并启动nodemon?

感谢@McMath的优秀回答 ,我现在已经有了webpack编译我的客户端和我的服务器。 我现在正在努力使webpack --watch有用。 理想情况下,我想让它在我的服务器进程中产生类似于nodemon的东西,当这个包发生变化时,以及当我的客户端发生变化时,还有一些浏览器同步。

我意识到这是一个捆绑器/加载程序,并不是一个真正的任务亚军,但有没有办法做到这一点? 谷歌结果的缺乏似乎表明我正在尝试新的东西,但这一定已经完成了..

我总是可以有webpack包到另一个目录,并使用gulp来观看它/复制它/ browsersync – 如果它,但这似乎是一个黑客..有没有更好的办法?

面对同样的问题,find了下一个解决scheme – “webpack-shell-plugin”。 它

允许您在webpack构build之前或之后运行任何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", } 

如果我运行“开始”脚本,它将启动下一个脚本序列:清洁 – >开始 – > 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”事件在第一次构build后触发一次,重build不会触发“onBuildEnd”,所以nodemon按预期工作

  1. 安装以下依赖项:

npm install npm-run-all webpack nodemon

  1. configuration你的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轻松地运行您的项目。

不要忘记configurationWatchIgnorePlugin为webpack忽略./dist文件夹。

依赖

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

这里没有必要使用插件。 你可以试试像下面那样运行多个nodemon实例。 尝试修改您的用例的以下脚本,并查看它是否适用于您:

 "scripts": { "start": "nodemon --ignore './public/' ./bin/www & nodemon --ignore './public/' --exec 'yarn webpack'", "webpack": "webpack --config frontend/webpack.config.js" } 

你不需要任何插件来使用webpack和nodemon,只需要在你的package.json上使用这个脚本

 "scripts": { "start": "nodemon --ignore './client/dist' -e js,ejs,html,css --exec 'npm run watch'", "watch": "npm run build && node ./server/index.js", "build": "rimraf ./client/dist && webpack --bail --progress --profile" },