Webpack devserver 客户端轮询 URL 与 Webpack devServer.public 设置不匹配答案

【问题标题】：Webpack devserver client polling URL does not match Webpack devServer.public settingWebpack devserver 客户端轮询 URL 与 Webpack devServer.public 设置不匹配
【发布时间】：2020-04-26 04:16:18
【问题描述】：

基本实时测试服务器运行于：https://socket.syntapse.co.uk/wds1/。无非就是加载一些 bundle 和 console.log 来测试 webpack 客户端加载和实时更新功能。

问题：我正在尝试将 webpack 开发服务器设置为通过 nginx 反向代理实时重新加载。尽管我在 webpack.config.js 中设置了我认为正确的值，但客户端 html 文件在轮询时没有使用正确的“devServer.public”URL，并且省略了路径。我没有更改默认为“sockjs-node”的“devServer.sockPath”，也没有更改默认为 true 的“devServer.inline”。根据我的配置，我希望 wds 服务器套接字的正确 url 是：

https://socket.syntapse.co.uk/wds1/sockjs-node/info?t=1578494631898

它确实按预期返回了有效的 json 数据，例如

{
"websocket": true,
"origins": [
"*:*"
],
"cookie_needed": false,
"entropy": 690102182
}

但客户端页面反复尝试轮询：

https://socket.syntapse.co.uk/sockjs-node/info?t=1578494631898

因为它省略了我在 webpack.config.js 中为“devServer.public”定义的路径的 /wds1/ 部分（下面的完整配置）。

问题摘要：客户端没有使用 webpack.config.js 文件中定义的完整“devServer.public”路径作为其套接字轮询连接的根。

配置：

nginx.conf

server {
    listen 80;
    server_name socket.syntapse.co.uk;
    # webpack socket
    location ^~ /wds1/sockjs-node/ {
        proxy_pass http://0.0.0.0:3803/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location ^~ /wds1/ {
        proxy_pass http://0.0.0.0:3803/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

webpack.conf.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.js',
        app: './src/app.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        contentBase: './dist',
        host: '0.0.0.0',
        port: 3802,
        public: 'https://socket.syntapse.co.uk/wds1/',
        disableHostCheck: true,
        overlay: {
            warnings: true,
            errors: true
        }        
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
        }),
    ],
};

package.json

{
  "name": "webpack-simple-example",
  "version": "1.0.0",
  "description": "simplest webpack-dev-server configuration",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=development",
    "dev": "webpack-dev-server --progress"
  },
  ...,
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.10.1"
  }
}

谢谢

【问题讨论】：

我尝试将 devServer.public 拆分为 "socket.syntapse.co.uk" 并将 devServer.publicPath 拆分为 "/wds1/" 但这会返回我的根目录中的文件索引，而不是 webpack.output 中指定的文件.

标签： javascript nginx webpack

【解决方案1】：

简单修复：需要包含 sockHost（只有，没有 sockPort）设置正确的客户端 URL。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.js',
        app: './src/app.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        contentBase: './dist',
        host: '0.0.0.0',
        port: 3802,
        sockHost: 'socket.syntapse.co.uk/wds1',
        public: 'socket.syntapse.co.uk/wds1/',
        disableHostCheck: true,
        overlay: {
            warnings: true,
            errors: true
        }        
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
        }),
    ],
};

【讨论】：