Webpack Ignore Code Splitting When Target Node

I've got a node app that uses react-router to render React views server-side. My issue is that I'm using require.ensure to do code splitting on the client-side but don't want to ha

Solution 1:

I've addressed this with conditionals around the require. If it's a browser build, require.ensure, if it's a server build, just require. I use the DefinePlugin to define 'constant' variables for the environment for each build, so it would look something like

if (BUILD_BROWSER) {
  require.ensure('foo.js', function() { ... });
} else {
  require('foo.js');
  ...
}

Webpack's static analysis is only smart enough to understand boolean values, so doing something like if (BUILD_TARGET === 'browser') won't work; the parser won't follow the logic and will process both requires.

If you're using the Uglify plugin, that will strip out the unneeded conditional logic so you don't bloat your production build.