Using webpack for both the client and server?

[richburdon]

I currently have two webpack configs: one for my react/relay client that uses the babel plugin; and one for my expressjs server; each defines an entry point and creates a bundle in /assets (client.bundle.js and server.bundle.js)

I have added the boilerplate webpackDevMiddleware and webpackHotMiddleware to my express server, but running into errors, and am confused by the set-up.

Since each config targets a different platform (i.e., "web" vs "node") it seems right that I still need separate configs. And different .babelrc configs (with different env sections determined by the NODE_ENV environment variable).

So:

webpack-dev-server => webpack.config.js => .babelrc

and:

NODE_ENV=server webpack --config webpack-server.config.js => .babelrc

But 1). I now get 100s of warnings and error when trying to build the server (below) after adding the boilerplate below:

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

const webpackConfig = require('webpack.config'); // Client config.

const compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: { colors: true }
}));

app.use(webpackHotMiddleware(compiler, {
  log: console.log
}));

2). If this is indeed the right approach, when my server.js file changes will I need to manually restart the dev server?

Thanks

[webpack server errors from command line above]:

ERROR in ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../package in /my_project/node_modules/fsevents/node_modules/node-pre-gyp/lib
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js 60:16-37

[100s of others]

[calesce]

Adding client/server webpack configs is probably too much complexity to add to this project, but I'd recommend taking a look at react-universally for a universal hot-reloading setup.

[richburdon]

@calesce thanks for the link; on first glance it seems that webpack 2 is where I need to go.

Anyway, I figured out ho to unblock my current set-up: I needed to use webpack-node-externals in my server config file.

const nodeExternals = require('webpack-node-externals');

externals: [nodeExternals()], // Ignore node_modules.