Webpack’s HMR & React-Hot-Loader — The Missing Manual

rajaraodv
rajaraodv
Apr 30, 2016 · 8 min read

Webpack HMR Brief Overview

Enable HMR Method 1 — Webpack’s CLI

1. inline option

2. hot option

//1. WDS is installed globally
webpack-dev-server --inline --hot
//2. WDS is installed as a dev-dependency
node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot
//3. from package.json's script
{
...
"scripts": {
"start": "webpack-dev-server --inline --hot"
}
...
}
You can run by from CLI by doing: npm start

Enable HMR Method 2 — webpack.config.js

webpack.config.js w/ HMR
//1. WDS is installed globally
webpack-dev-server
//2. WDS is installed as a dev-dependency
node_modules/webpack-dev-server/bin/webpack-dev-server.js
//3. from package.json's script
{
...
"scripts": {
"start": "webpack-dev-server
}
...
}

FYI — webpack.config.js (contentBase)

Enable HMR Method 3 — Via NPM Module

custom-web-dev-server.js

App Scenario 1 — A Simple React App

Adding Style-Loader or React-Hot-Loader

npm install react-hot-loader --save-dev
npm install style-loader --save-dev
Showing react-hot-loader and style-loader

“loaders” Vs “loader” inside “loaders”

“/hot/only-dev-server” Vs “/hot/dev-server”

App Scenario 2— A React App With Backend API calls (proxy)

App Scenario 3— A React App With Backend Server That’s BOTH API AND Web Server

index.ejs at localhost:3000
Shows the scenario of API+Web server
proxy everything w/ *

FYI — publicPath overrides proxy settings

Web + API Server
since it matches /static/, “/static/bundle.js” is served from localhost:8080 itself instead of proxying it

My Other Posts

ES6

WebPack

Draft.js

React And Redux :

Salesforce

Thanks to Alexander Jsx

rajaraodv

Written by

rajaraodv

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade