How to ignore server-side rendering in development

I'm running an express / react app with server code that looks something like this:

let router;
if (process.env.NODE_ENV === 'production') {
  // src/client is a dependency of server-bundle.js
  router = require('./routerWithServerSideRendering').default;  
} else {
  // src/client is not a dependency of server-bundle.js
  router = require('./routerWithoutServerSideRendering').default;
}
app.use(router);

My development build is this:

webpack-dev-server webpack.client.config.js & \
webpack --watch webpack.server.config.js & \
nodemon --watch server-bundle.js server-bundle.js & \
trap 'kill $(jobs -p) > /dev/null 2>&1' INT HUP TERM; \
wait;

In a nutshell: it's using HMR to reload changes to client code, and using nodemon to restart the server on any changes to server-bundle.js. Webpack compiles server-bundle.js, and recompiles if it observes changes to any of the dependencies.

This for the most part works great! I'm able to reload changes to client code without needing a refresh. However, every time any client-side code changes, the entire server bundle is recompiled since the server-side rendering makes all the client code a dependency of the server. This happens even though the client code is never loaded when NODE_ENV !== 'production'.

Is there a way to change this so that webpack will not watch the client code when NODE_ENV !== 'production'?

via Joseph Nields