HMR在浏览器中未请求webpack-dev-server自定义端口

编程问答 2022-06-19

问题描述

我已经为此苦苦挣扎了一段时间，觉得自己已经很接近了，但是只是没有抓住难题的最后一部分。

我正在尝试通过WSL2（Ubuntu 20.04 LTS）通过Docker for Windows使用webpack-dev-server进行HMR和实时样式加载wordpress主题。当我运行npm run watch后启动浏览器时，在运行服务器时我将看到以下WDS / HMR输出，然后将更改保存到CSS文件中：

[WDS] Hot Module Replacement enabled. client:48
[WDS] Live Reloading enabled. client:52
[WDS] App updated. Recompiling... 2 client:55
[WDS] App hot update... reloadApp.js:19
[HMR] Checking for updates on the server... log.js:24
XHR GET https://custom-domain.localhost/f386a227064d634d7cdf.hot-update.json

注意最后一行。我希望浏览器会请求https://custom-domain:3000，但是端口号已被排除。

这是我的webpack-dev-server配置：

const path = require('path');
const { merge } = require('webpack-merge');

const Base = require('./webpack.base.config');

module.exports = merge(
   Base,{
       mode: 'development',devServer: {
           contentBase: path.resolve(__dirname,'./theme/dist'),port: 3000,host: '0.0.0.0',allowedHosts: [
               'custom-domain.localhost'
           ],hot: true,hotOnly: true,watchOptions: {
               poll: true
           },https: true,public: 'custom-domain.localhost:3000',writetodisk: true,},module: {
           rules: [
               {
                   test: /\.css$/,exclude: /node_modules/,use: [
                       {
                           loader: 'style-loader'
                       },{
                           loader: 'css-loader',options: {
                               importLoaders: 1
                           }
                       },{
                           loader: 'postcss-loader'
                       }
                   ]
               }
           ]
       },output: {
           filename: '[name].js'
       }
   }
);

我本以为指定public就足够了，但显然还不够。 public可能不正确，因为我没有使用代理（as the WDS docs would suggest），但这是我最近的代理。我可以在浏览器窗口中访问https://custom-domain.localhost:3000。

请问有人对我有什么建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

webpackwebpackwebpackwebpack-dev-server