webpack - 如何配置 webpack 服务？

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",
  },
};

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

Answer 1

试试下面的配置，

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

“开始”:“webpack-dev-server --config webpack.config.js --host localhost --port 8080 --open”