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

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 -

in your case it will look like this -

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