webpack-dev-server 热重载不工作

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

My webpack.config.js looks like:

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

I run:

webpack-dev-server --content-base dist --hot

And it builds and seems like it's working. localhost:8080 shows the expected result but hot-reload does just not work. When I change a file I can see in terminal that a rebuild is happening but nothing happens in the browser. Am I missing something in the config?

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

Answer 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

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

Answer 4

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

The only thing that works for me is apply the " hotOnly " inside the configuration of the "devServer" (on the "webpack.config.js"), like this:

devServer: {
    hotOnly: true,
},

After reload the "Webpack Dev Server", the "Hot Reload" works, at least, after saving any change in CSS or JS files.

Answer 7

For Webpack ^5.72.1

This worked for me,

 devServer: {
    port: 3000,
    hot: false,
    liveReload: true,
  },

Note: liveReload will reload the whole application on file save but it will lose application state. Hot reloading preserves state. But liveReload seemed to fix the issue for me with css/html not loading on the browser after save, without having to refresh the browser.

Answer 8

Webpack hot reloading stopped working for me as well. The solution for me was to delete the node_modules folder and fresh install all dependencies. Just open the parent folder of node_modules in your terminal and run npm install

Answer 9

所有受苦的人：不要忘记公共路径前的斜杠： publicPath:'/assets/scripts/'不是publicPath:'assets/scripts/'因为路径字符串中的 1 个正斜杠而丢失了三天

Answer 10

Try this:

In your package.json file, delete the line that contains "test" "echo \"Error: no test specified\" && exit 1" under the scripts object, and replace it with:

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

Then to restart your project, just use npm start .

This worked for me when I ran into this problem.

Edit: Can you share your package.json file?

Try adding this to webpack.config.js as well

devServer: {
  inline: true,
  port: 3000,
  hot: true
},

Answer 11

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 12

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 13

You can try adding this to your config:

module.exports = {
...
  devServer: {
    contentBase: './dist/', // Since your index.html is in the "dist" dir
    open: true,             // Automatically open the browser
    hot: true,              // Automatically refresh the page whenever bundle.js changes
                            // (You will have to refresh manually if other files change)
  },
...
};

And then running (no options):
webpack-dev-server

Answer 14

With the above settings, while using webpack-dev-server for static page building I add bundle js or whatever js file configured as output to the html page. This way I get refresh on my static page after any changes.

Answer 15

For webpack version 5, the module.loaders is now module.rules. And for the presets change query to options.

Answer 16

Make sure in development mode you are not using a plugin that extract css into files, example MiniCssExtractPlugin. It messes the things up.