3

我正在尝试按照教程设置一个 webpack 开发服务器，webpack-dev-server其中webpack-cli v4使用webpack-serve. 我的文件夹结构如下所示。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”错误的页面，这里说，它必须尝试提供索引文件，但找不到。在"start"脚本中我没有指定主机和端口时，它会在 http://[::]:55555/ 上打开一个页面，并且我得到“无法连接错误”，我的包中的任何内容都不会记录到控制台。路径对我来说似乎很好。在 webpack.config.js 中更改devServer为serve会在命令行中产生错误：配置具有未知属性“服务”。请帮我找出问题并让服务器运行。

4

1 回答 1

1

Try with below configuration,

"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"

于 2020-10-20T19:49:53.693 回答