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按预期工作
- 安装以下依赖项:
npm install npm-run-all webpack nodemon
- 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
文件夹。
依赖
-
npm-run-all
– 用于并行或顺序运行多个npm脚本的CLI工具。 -
webpack
– webpack是一个模块打包器。 其主要目的是将JavaScript文件捆绑在浏览器中使用,但它也能够转换,捆绑或打包任何资源或资产。 -
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" },