Webpack開発サーバーの無効なホットロードに対処する方法

今回は、Webpack dev サーバーの無効なホット ロードに対処する方法を説明します。

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 は絶対アドレスを使用する必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

webpack-dev-server のリモート モードを設定する方法

webpack が IP アドレスを介して localhost にアクセスできない場合はどうすればよいですか?

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