About the solution to Webpack dev server hot loading failure, webpackdev

About the solution to Webpack dev server hot loading failure, webpackdev

When the Webpack dev server is used as the server for hot loading, 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 message is displayed:

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. You need to change the absolute address to the relative address, as shown below:

Output: {filename: '[name]. js', // cannot be configured as an absolute path. This is the incorrect configuration // publicPath: "http: // localhost: 8080/dist/", // This is the correct configuration, publicPath: "/dist/", path: build, // umd contains support for multiple specifications such as amd, commonjs, and var. libraryTarget: 'var '}

After repeated tests, the publicPath of webpack dev server is injected into other domains. If you use the absolute address configuration, the above error will occur.

Note that webpack dev server is the opposite of webpack-hot-middleware, and webpack-hot-middleware must use an absolute address.

The above solution to the Webpack dev server hot loading failure is all the content that I have shared with you. I hope you can give us a reference and support for more.