无法 GET / - localhost 8080 无法与 webpack 开发服务器一起使用

Question

我一直在网上关注这个教程：https://www.youtube.com/watch?v=TOb1c39m64A。

大约 10 分钟后，我们将首次启动 webpack 开发服务器。我这样做了，当我前往：http://localhost:8080/ 时，我收到一个白色网页，其中只有文字 Cannot GET /。

这些是我迄今为止安装的唯一软件包：

"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }

我有一个名为“start”的脚本，它运行webpack serve，运行成功并显示：

<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/

根据教程，我没有 webpack 配置，但是我在其他编码项目中搞乱了其他 webpack 的东西，其中一个可以使用我的 8080 端口吗？我主要在 Firefox 中工作，但这个问题在所有浏览器中都存在。

我还查看了我的主机文件并添加了一行，如果您认为它可以帮助我将其粘贴在这里。

这里要求的是我的 package.json（大部分已经在上面发布了）：

{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }

Answer 1

即使在 7 个月后，该教程似乎也已经过时了。

为像我这样在 Windows 电脑上关注它的人修复。

在我的根目录中添加了一个 webpack.config.js 文件，如下所示：

module.exports = {
  mode: "development",

  devServer: {
    static: "./dist",
  },
};

在本教程中，它使用contentBase 作为 devServer 对象中的键，该属性在最近的更新中似乎已被弃用，因此使用static 作为替代。

现在所有内容都提供给 localhost 并且可以正常工作了。