Configure Webpack to Work with React Universal Component
We’ll make the webpack configuration changes needed to get universal components working. We'll go from a typical webpack configuration to a "universal" webpack configuration. We'll need two webpack configs—one for the client and one for the server. Each config needs several specific changes to be made to get universal working.
Instructor: [00:00] 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.
[00:21] 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.
[00:41] We still want to target the web and we don't need to change anything with our JavaScript setting. We can still run it through babel. The CSS config needs to change. We need to use the extract-css-chunks-plugin and we need to call the extract method, and just tell it to use the CSS loader.
[01:03] 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.
[01:35] 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.
[02:00] 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.
[02:27] 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.
[02:54] Go ahead and tell it to follow the same file name pattern. We want min chunks to be infinity. Now, let's set up our server config. You want this to target node. We can actually leave our JavaScript alone again. We want to make sure our CSS is not loading node modules. We want to tell the CSS loader to use css-loader/locals.
[03:23] 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.
[03:54] 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.