Comment gérer le chargement à chaud non valide du serveur de développement Webpack

Cette fois, je vais vous montrer comment gérer le chargement à chaud invalide du serveur de développement Webpack. Quelles sont les précautions pour gérer le chargement à chaud invalide du serveur de développement Webpack. Ce qui suit est un cas pratique. , jetons un coup d'oeil.

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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment configurer le mode distant pour webpack-dev-server

Pourquoi Webpack ne peut-il pas accéder à localhost via l'adresse IP ?

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!