Webpack 開発サーバーでホットロード障害が発生する

以下に、Webpack 開発サーバーのホットロードの失敗の解決策に関する記事を共有します。これは良い参考値であり、皆さんのお役に立てれば幸いです。

Webpack 開発サーバーをホット ロード サーバーとして使用すると、次のエラーが発生します:

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.

、または次の警告メッセージが表示されます:

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)

診断後、構成エラーは webpack にあります.config .js の publicPath については、次のように絶対アドレスを相対アドレスに変更する必要があります:

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

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

テストを繰り返した後、webpack dev サーバーの publicPath を他のドメインに挿入します。絶対アドレス設定の場合、必ず上記のエラーが発生します。

webpack dev サーバーは webpack-hot-middleware の正反対であることに注意することが重要です。webpack-hot-middleware は絶対アドレスを使用する必要があります。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptでコンテンツをクリップボードにコピーする方法

vue+elementに一括削除機能を実装する方法

Reactコンポーネントを使用する場合にVueコンポーネントを変換するコマンドの書き方とは?

以上がWebpack 開発サーバーでホットロード障害が発生するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。