We will add configurations to our project to enable hot module reloading, so that our changes will update in the browser without a hard window refresh. We’ll need to add two packages to our project:
Instructor: [00:00] We need to install a couple of specific modules for hot loading. Those are react-hot-loader and webpack-hot-middleware. Once those are installed, we can make changes to our codebase.
[00:16] On this server, I need to go ahead and import the webpack-hot-middleware. I'm going to add the middleware to be used right after webpack-dev-middleware and before hot-server-middleware. It'll take in one parameter, and that's going to be the client compiler.
[00:42] Next, we're going to jump over to the webpack-config on the client, so we need to add some things to our entry. The first one is going to be the webpack-hot-middleware/client, and we also want react-hot-loader/patch. We go down to our plugins, and we need to enable the HotModuleReplacementPlugin as well as set up the DefinePlugin.
[01:25] We want to set the NODE_ENV variable to development, and this will turn various various development features on in webpack and hot module reloading. Take a peek at the server config now. We just need to add a couple of plugins.
[01:49] We want to turn on an optimization called the LimitChunkCountPlugin. We're going to set maxChunks to one. This is going to enable the server-side code to run synchronously, because there's only going to be one chunk.
[02:10] Next, we actually just want to copy the DefinePlugin over on the server as well. We've got a change to make in our babelrc. We're going to use a feature in the babelrc called env, and it lets you set overrides for various environments.
[02:29] For our development environment, we want to override some plugins. We'd like to enable the react-hot-loader babel-plugin.
[02:45] Now, let's set up our actual client code. We want to import AppContainer from react-hot-loader lib AppContainer. Then, we want to wrap our app in the AppContainer. Any child of AppContainer is going to reload when a change occurs.
[03:10] Lastly, we want to look at the Node environment, and if we're in development, and if hot-module-reloading exists, then we want to accept any hot module changes to our components/appjs file, so anytime that file changes, or anything that that file imports, then, we want to go ahead and grab a fresh copy of App, don't grab the default, and we want to render that new app. If I did everything correctly, then we should see hot-module-reloading working.
[04:13] Open up our app. We'll change "Home" to "Bass" safe, and there you see I went to base live without refreshing. Same with if we change any other styles and save those, we see the styles update as well.
[04:31] This way I can change tabs, I can change...This is state. We're keeping the state. We should be able to change this without resetting back to home. If I change "Bar" to "Hello," I see a change in there as well.
however would be also great to have the reason behind using some plugins and also pointers to detailed information on usage.
Thanks for the feedback. Which specific plugin (or other piece) would you like more explanation on?
Hi,
Is the LimitChunkCountPlugin plugin required for this setup to work? I'm not sure to fully understand why we need it. Is it only for hot reloading and if not why do they have it here on the prod server config.
Is the LimitChunkCountPlugin plugin required for this setup to work?
I'm not sure if it's needed for production, but I did find that things did not work if I removed it from the development configuration.
The github code package.json uses webpack 4 but the CommonsChunkPlugin has been deprecated and removed, see here:
https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
This course is pretty fast paced which is great, however would be also great to have the reason behind using some plugins and also pointers to detailed information on usage.
Otherwise all we do here is eating fish, not learning how to fish!