feelingreat's questions

大家好！我遇到了以下 websocket 代理问题ws/**：

<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET
<e>     at TCP.onStreamRead (node:internal/stream_base_commons:217:20) {
<e>   errno: -4077,
<e>   code: 'ECONNRESET',
<e>   syscall: 'read'
<e> }

我已在最底部附加了我的配置和软件包版本。

最初，webpack从版本4迁移到版本5。在版本4中，没有观察到这个问题。即使现在，切换到旧版本的项目，/ws/**使用套接字时也不会发生这样的错误。

数据通常通过 websocket 本身到达，但每次与 websocket 交互时，IDE 控制台中都会显示此错误。尝试过：

• 添加字段webSocketTransport，webSocketURL以及webSocketServer
• 将 webpack 包更新到最新版本
• 直接安装ws最新版本包

封装版本：

        "webpack": "^5.89.0",
        "webpack-bundle-analyzer": "^4.10.1",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1",
        "html-webpack-plugin": "^5.6.0",

网络包配置：

"use strict";

const webpack = require("webpack");
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { DefinePlugin } = require('webpack');

const Xliff2Json = require("./Xliff2Json");

const ip = require("ip");
const DEV_IP_ADDR = ip.address();
const DEV_PORT = 5002;
const ASSET_PATH = process.env.ASSET_PATH || "/";
const API_DOMAIN = "";
const API_PORT = "";

const isDevelopment = process.argv[process.argv.indexOf('--mode') + 1] === 'development';

const webpackConfig = {
    entry: ["@babel/polyfill", "./src/index.jsx"],
    output: {
        filename: isDevelopment ? "[name].bundle.js" : "[contenthash].bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/",
        library: "app",
    },
    devServer: {
        port: DEV_PORT,
        host: DEV_IP_ADDR,
        historyApiFallback: true,
        devMiddleware: {
            publicPath: ASSET_PATH,
            stats: "minimal",
        },
        client: {
            logging: "info",
            overlay: {
                errors: true,
                warnings: false,
                runtimeErrors: true,
            },
            webSocketTransport: 'ws',
            webSocketURL: `ws://${DEV_IP_ADDR}:${DEV_PORT}/ws`,
        },
        webSocketServer: 'ws',
        static: {
            directory: path.join(__dirname, "dist"),
        },
        open: true,
        hot: true,
        liveReload: true,
        proxy: [
            {
                context: [
                    "/api/**",
                    "/stream/sse/**",
                    "/download/**"
                ],
                target: "https://my-instance.com",
                secure: false,
                changeOrigin: true,
            },
            {
                context: [
                    "/ws/**",
                    "/stream/ws/**"
                ],
                target: "wss://my-instance.com",
                ws: true,
                secure: false,
                changeOrigin: true,
            },
        ],
    },
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ],
            },
            {
                test: /\.(jsx|js)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
            }
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: isDevelopment ? "[id].css" : "[contenthash].css",
            ignoreOrder: true
        }),
        new HtmlWebpackPlugin({
            inject: true,
            hash: true,
            favicon: "./src/static/images/favicon.png",
            template: "./src/index.html",
            filename: "index.html",
        }),
        new DefinePlugin({
            API_DOMAIN: `"${API_DOMAIN}"`,
            API_PORT: `"${API_PORT}"`,
        }),
        new CspHtmlWebpackPlugin(
            {
                "default-src": ["'self'", "my-sentry-backend.com", "wss:", "ws:"],
                "base-uri": "'self'",
                "object-src": "'none'",
                "frame-src": "'none'",
                "worker-src": "blob:",
                "img-src": ["'self'", "data:"],
                "script-src": ["'self'", "'unsafe-eval'"],
                "style-src": ["'unsafe-inline'", "'self'"],
            },
            {
                enabled: true,
                hashingMethod: "sha256",
                hashEnabled: {
                    "worker-src": true,
                    "script-src": true,
                    "style-src": true,
                },
                nonceEnabled: {
                    "worker-src": true,
                    "script-src": true,
                    "style-src": false,
                },
            }
        )
    ],
};

if (isDevelopment) {
    webpackConfig.devtool = 'inline-cheap-module-source-map';
}

module.exports = webpackConfig;