Un échec de chargement à chaud se produit sur le serveur de développement Webpack

Ci-dessous, je partagerai avec vous un article sur la solution à l'échec du chargement à chaud du serveur de développement Webpack. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Lors de l'utilisation du serveur de développement Webpack comme serveur de rechargement à chaud, l'erreur suivante se produit :

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.

Ou le message d'avertissement suivant se produit :

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)

Après le diagnostic, l'erreur de configuration se trouve dans le publicPath de webpack.config.js, et l'adresse absolue doit être remplacé par une adresse relative. Comme suit :

output : {
 filename : '[name].js',
 // 不可配置为绝对路径,这是错误的配置
 //publicPath: "http://localhost:8080/dist/",

 // 这是正确的配置，
 publicPath: "/dist/",
 path : build,
 // umd包含了对amd、commonjs、var等多种规范的支持 
 libraryTarget : 'var' 
}

Après des tests répétés, le publicPath du serveur de développement webpack a été injecté dans d'autres domaines si la configuration de l'adresse absolue est. utilisé, l'erreur ci-dessus se produira certainement.

Il est important de noter que le serveur de développement webpack est exactement le contraire de webpack-hot-middleware, et webpack-hot-middleware doit utiliser des adresses absolues.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment copier du contenu dans le presse-papiers en JavaScript

Comment implémenter la fonction de suppression par lots dans vue+element

Quelles sont les commandes à écrire lors de l'utilisation de composants React pour transférer des composants Vue ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!