webpack-dev-server中遇到的问题cannot get

Question

学习webpack-dev-server中遇到的问题
谷歌浏览器

火狐浏览器

终端

这是webpack.config.js

const path = require("path");
module.exports = {
    mode: "development", // mode 用来指定构建模式/* development未压缩   production压缩后*/
    /* 修改打包出入口 */
    entry: path.join(__dirname, "./src/index.js") /* 入口 */,
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js",
    } /* 出口 */,
};

这是package.json

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}