Hot loading failure occurs in Webpack dev server

Below I will share with you an article about the solution to the failure of hot loading of Webpack dev server. It has a good reference value and I hope it will be helpful to everyone.

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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to copy content to the clipboard in JavaScript

How to implement batch deletion function in vue element

What are the commands to write when using React components to transfer Vue components?

The above is the detailed content of Hot loading failure occurs in Webpack dev server. For more information, please follow other related articles on the PHP Chinese website!