webpack-dev-server hot reload not working

Question

My file structure is:

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.con         


        

Answer 1

Check your console logs if it has below error then add cors to your webpack dev server file

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

Ideally add below entry in you dev server js

headers: { "Access-Control-Allow-Origin": "*" },

Answer 2

--inline --hot wasn't an issue for me

If you are using redux can try this.

For some random reason redux-devtools was not allowing hot reload for me. Try removing it from root component and redux compose config.

Note: Use redux devtool browser extension with this config in your store configuration: window.devToolsExtension ? window.devToolsExtension() : f => f

Also, must read: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

Or try hot reload 3: example: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

Answer 3

100% Working Solution

You have to just follow 3 steps and you will get your hot reloading as you expected

1. Include "publicPath" key in "Output" property of webpack config. "publicPath" should contain path to your bundle.js file so that dev-server will know if there is any change in your bundle.js file and it will reload your application.

Your config should look like this -

output: {
   path: __dirname,
   publicPath:"/dist/js/",
   filename: './dist/js/bundle.js'
}

2. Add "devServer" option in config file -

devServer:{
   contentBase:"/src/",
   inline:true,
   stats:"errors-only"
}

Please note that contentBase should point to the path where you put your index.html file which contain your script tag in your case it will be "/src/"

3. At last you have to make sure 'src' attribute of your 'script' tag in index.html points to bundle.js starting from "http://localhost:port" as follow -

<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>

in your case it will look like this -

<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>

And finally remember webpack-dev-server doesn't compile your js file or make build or watch on your js file it dose everything in memory to watch on your js file you have to run webpack --watch in seprate window

Answer 4

I increased the max number of file changes that can be watched and it worked for me. I guess the issue for me was too many files.

echo fs.inotify.max_user_watches=1999999 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

source

Answer 5

What worked for me is to write <script src="bundle.js"> and not <script src="dist/bundle.js"> in my index.html file.

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

Keeping dist/bundle.js as the output file works perfectly fine if you just build it using webpack. But when using webpack-dev-server, the static file already in the file system continues to be served, and not the latest hot replacement. It seems webpack-dev-server gets confused when it sees dist/bundle.js in the html file and doesn't hot replace it, even though webpack.config.js is configured to that path.