如何配置 webpack-serve？

Question

我正在尝试按照教程设置 webpack 开发服务器，其中使用 webpack-dev-server 完成，但由于它不适用于 webpack-cli v4，我决定使用 webpack-serve（版本 3.2 .0)。我的文件夹结构看起来像this。 index.js 和 test.js 是捆绑在一起的，它们应该记录一些数字和一个字符串到控制台，dist 文件夹中的 index.html 连接到 bundle.js。我的 package.json 是：

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-serve --config webpack.config.js --host localhost --port 8080 --open"
  },
  "author": "Alex",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-serve": "^3.2.0"
  },
  "dependencies": {}
}

webpack.config.js 看起来像这样：

const path = require("path");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: "./dist",
  },
};

当我运行"start" 脚本时，它会打开一个带有“未找到/404”错误的页面，here 它说它必须尝试提供索引文件，但找不到。当在"start" 脚本中我没有指定主机和端口时，它会在 http://[::]:55555/ 上打开一个页面，并且我得到“无法连接错误”，我的包中没有任何内容被记录到控制台。路径对我来说似乎很好。在 webpack.config.js 中将 devServer 更改为 serve 会在命令行中产生错误：配置具有未知属性 'serve'。请帮我找出问题并让服务器运行。

Answer 1

试试下面的配置，

"webpack": "^5.1.3", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0"

"start": "webpack-dev-server --config webpack.config.js --host localhost --port 8080 --open"