Instructor: Let's get our webpack set up properly to work with react-universal-component. Really the first thing I wanted to do is, duplicate this file and create one for the server. We want a client webpack config and a server webpack config. We'll come back to the server one here in a second.
We do want to give each webpack config a name, and this is going to be used by the webpack-hot-server-middleware. That middleware is expecting two webpack configs, one with the name of the client and one with the name of the server.
We want to make sure when importing it at the top. We need to be more specific with our output. We need to tell webpack that we'd like our file names to follow a pattern. We'll put the name followed by js in the file name. We also want the chunk file name to follow the same pattern.
This will keep things nice and clean, and consistent between the file names and the chunk names. We should choose a location to write our output to. I'm going to build these files to the build client folder. We also need to tell it where we're going to serve our static files from.
We're not going to need the HTML webpack plug-in anymore. It was creating an indexed HTML for us, but now we'll be using the server to create and server our HTML content. However, we do have some plug-ins we need to add. We need to instantiate the extract-css-chunks-plugin. We need to use the optimize.comments-chunk-plugin.
To ensure that webpacks bootstraps specific code gets split into its own chunk, and gets served before our other chunks. The way we do that is, we use this plug-in and we specify the names property. The only name we're going to provide is bootstrap. This is actually a special value that when we pass it, webpack knows you are asking it to split the bootstrap into its own file and chunk.
This is a special server side version of the CSS loader. We don't need any plug-ins. We'd like our entry to be server/render which is a file we need to write. We don't need the DevTool. One additional thing we need to add is we need to set a library target for the server output to commonjs2.
This is needed because we need to make sure that the export from this render.js is available on module.exports, and that's what commonjs2 will make happen. The webpack-hot-server-middleware is going to expect it.