Webpack-dev-server Hot Reload Not Working

July 15, 2022 Post a Comment

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.config.js package.json My

Solution 1:

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.

Solution 2:

When using webpack-dev-server, it builds all files internally and does not spit them out into your output path. Running webpack alone, without the dev server, does the actual compilation to disk. The dev server does everything in memory which speeds up re-compilation by a lot.

To fix your hot reload issue, set the content base to your source directory and enable inline-mode

Like so:

webpack-dev-server --content-base src --hot --inline

Solution 3:

None of the options on this page worked for me. After changing the devServer section to:

devServer: {
    port: 8080,
    contentBase: ['./src', './public'], // both src and output dirs
    inline: true,
    hot: true
},

it worked.

Solution 4:

100% Working Solution

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

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 -

Baca Juga

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

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/"

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

Solution 5:

--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