How to deal with invalid hot loading of Webpack dev server

This time I will bring you how to deal with the invalid hot loading of Webpack dev server. What are the things to note when dealing with the invalid hot loading of Webpack dev server? The following is a practical case, let's take a look.

When using Webpack dev server as a hot reloading server, the following error occurs:

XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost' is therefore not allowed access.

Or the following warning appears Information:

dev-server.js:37 [HMR] Update failed: Error: Manifest request to http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json timed out.
 at XMLHttpRequest.request.onreadystatechange (http://localhost:8080/dist/main.js:38:22)

After diagnosis, the configuration error lies in the publicPath of webpack.config.js. The absolute address needs to be changed to a relative address, as follows:

output : {
 filename : '[name].js',
 // 不可配置为绝对路径,这是错误的配置
 //publicPath: "http://localhost:8080/dist/",
 // 这是正确的配置，
 publicPath: "/dist/",
 path : build,
 // umd包含了对amd、commonjs、var等多种规范的支持 
 libraryTarget : 'var' 
}

After repeated testing, the publicPath of the webpack dev server is injected into other domains. If absolute address configuration is used, the above error will definitely occur.

It should be noted that webpack dev server is exactly the opposite of webpack-hot-middleware, and webpack-hot-middleware must use absolute addresses.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to set up remote mode for webpack-dev-server

Why webpack cannot access localhost through IP address manage?

The above is the detailed content of How to deal with invalid hot loading of Webpack dev server. For more information, please follow other related articles on the PHP Chinese website!