Webpack --watch and launching nodemon?

Question

Thanks to an excellent answer by @McMath I now have webpack compiling both my client and my server. I\'m now on to trying to make webpack --watch be useful. Ideally

Answer 1

@Ling has an answer very close to being correct. But it errors the first time somebody runs watch. You'll need to modify the solution as so to prevent errors.

1. Run npm install npm-run-all webpack nodemon

2. Create a file called watch-shim.js in your root. Add the following contents, which will create a dummy file and directory if they're missing.

   var fs = require('fs');
   
   if (!fs.existsSync('./dist')) {
       fs.mkdir('./dist');
       fs.writeFileSync('./dist/bundle.js', '');
   }
   

3. Setup your scripts as so in package.json. This will only run watch if the watch-shim.js file runs successfully. Thereby preventing Nodemon from crashing due to missing files on the first run.

   {
       ...
       "scripts": {
           "start": "npm run watch",
           "watch": "node watch-shim.js && npm-run-all --parallel watch:server watch:build",
           "watch:build": "webpack --progress --colors --watch",
           "watch:server": "nodemon \"./dist/bundle.js\" --watch \"./dist/*\""
       }
       ...
   },