Webpack devServer不尊重webpack.config.js中的devServer选项

Question

我已经抓了4个小时的头了，现在我开始使用堆叠溢出的方法。

我有一个超级简单的Webpack项目。这是我的webpack配置：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname)
    },
    devServer: {
        port: 3000,
        host: 'localhost',
        historyApiFallback: {index: 'index.html'}
    }
};

以下是我的文件结构：

node_modules/
src/
├─ index.js
index.html
main.js
package.json/
webpack.config.js/

真的很简单。

在src/index.js，我有console.log('Hello')。就这一行。

我在项目根目录中还有一个带有emmet样板代码的index.html，它带有一个脚本标记，从项目根目录中导入main.js。

这是我的package.json

{
    "name": "threejstinkering",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack-serve",
        "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^5.25.0",
        "webpack-cli": "^4.5.0",
        "webpack-dev-server": "^3.11.2",
        "webpack-serve": "^3.2.0"
    },
    "dependencies": {}
}

问题

运行npm run dev时，Webpack给出了以下输出：

webpack发球

⬡ webpack: Watching Files
(node:2640) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
⬡ wps: Server Listening on: http://[::]:55555

⬡ webpack: asset main.js 69.9 KiB [emitted] [compared for emit] (name: main)
  runtime modules 25.7 KiB 9 modules
  cacheable modules 23.6 KiB
    modules by path ./node_modules/webpack-plugin-serve/lib/client/ 22.5 KiB
      modules by path ./node_modules/webpack-plugin-serve/lib/client/*.js 8.02 KiB
        ./node_modules/webpack-plugin-serve/lib/client/client.js 3.32 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/log.js 756 bytes [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/ClientSocket.js 2.27 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/hmr.js 1.69 KiB [built] [code generated]
      modules by path ./node_modules/webpack-plugin-serve/lib/client/overlays/*.js 14.5 KiB
        ./node_modules/webpack-plugin-serve/lib/client/overlays/progress-minimal.js 1.69 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/overlays/progress.js 3.43 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/overlays/status.js 8.21 KiB [built] [code generated]
        ./node_modules/webpack-plugin-serve/lib/client/overlays/util.js 1.17 KiB [built] [code generated]
    ./src/index.js 22 bytes [built] [code generated]
    ./node_modules/webpack-plugin-serve/client.js 1.05 KiB [built] [code generated]
  0 (webpack 5.25.0) compiled successfully in 94 ms 

根据日志，它在端口55555?上打开了一个服务器。当我到那里时，它似乎加载了正确的页面，但是webpack dev服务器的热重新加载功能失败了，因为我在浏览器控制台中得到了以下错误：

ClientSocket.js:44 WebSocket connection to 'ws://[::]:55555/wps' failed: 
connect @ ClientSocket.js:44
ClientSocket @ ClientSocket.js:25
run @ client.js:27
eval @ client.js:35
eval @ client.js:36
./node_modules/webpack-plugin-serve/client.js @ main.js:18
__webpack_require__ @ main.js:137
(anonymous) @ main.js:1147
(anonymous) @ main.js:1149
ClientSocket.js:59 ⬡ wps: The client WebSocket was closed. Please refresh the page

无论我如何尝试，Webpack似乎不尊重我的选择端口3000和网络套接字连接热重装失败。我的菜鸟犯了什么错？这是个简单的项目。我的其他webpack项目基于反应工作，但不是这个(我想学习Three.js)。我失踪的那两个人有什么区别吗？

非常感谢你的帮助。

Answer 1

感谢@khan，我所需要做的就是将webpack-serve中的连字符排除到webpack serve！真不敢相信！！我就知道这很简单！有点面子，但我知道我不会再犯那个错误了。