Get Nodemon to restart AFTER Webpack re-build

Looking for a great (remote only) React Dev? Visit my profile on LinkedIn and say hi! 😃

Express-Webpack applications like Expack and Rexpack work off of Webpack-Dev-Middleware (WDM) and Webpack-Hot-Middleware (WHM) in development mode, so that we can enjoy in-memory Webpack builds every time you save a file, and Hot Module Reloading so that you don’t have to refresh the browser after every change.

The problem is that WDM and WHM don’t play nice with Webpack 4 and error out in some conditions. In Webpack 4, you can set development or production mode from the command line by using a flag:

webpack --mode development --config webpack.prod.config.js

Then in your config file you can detect what flag Webpack was called with by returning a function, instead of an object, which takes a param argv that has a property mode.

module.exports = (env, argv) => {
   console.log('Mode: ', argv.mode)
   
   const SERVER_PATH = (argv.mode === 'production') ?
     './src/server/server-prod.js' :
     './src/server/server-dev.js'
   /* other config code - etc  */
}

So if you want seamless full stack development, you’re back to the drawing board and looking at tools like Nodemon again, but quite quickly, you run into the issue of build timing.

That problem you face is: how do you get Nodemon to restart ONLY AFTER Webpack has finished the build…