webpack-cli: 无效的选项对象。Dev Server已使用选项对象初始化。

Question

我想要开始一个redux项目，以下是提供的package.json文件:

{
  "name": "redux-starter",
  "version": "1.0.0",
  "description": "Redux Starter Project",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js",
    "test": "jest --watch"
  },
  "keywords": [],
  "author": "Mosh Hamedani",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@types/jest": "^25.1.3",
    "axios-mock-adapter": "^1.17.0",
    "babel-jest": "^25.1.0",
    "jest": "^25.1.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.2.5",
    "axios": "^0.19.2",
    "immer": "^5.3.6",
    "immutable": "^4.0.0-rc.12",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "reselect": "^4.0.0"
  }
}

webpack.config.js在此处：

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 9000
  },
  mode: "development",
  devtool: "source-map"
};

当我运行这个项目时，我收到了错误提示：

$ npm start

> redux-starter@1.0.0 start
> webpack-dev-server --config ./webpack.config.js

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

这里有什么问题，我该如何解决？谢谢。

- Arefe

---

Webpack 5有重大变化，这篇文章帮了我大忙 https://frontendguruji.com/blog/invalid-options-object-dev-server/ - Mandeep Pasbola

Answer 1

取代

devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 9000
},

使用：

devServer: {
    static: path.resolve(__dirname, 'dist')
    port: 9000
},

- Md Rajaul

---

他们总是不停地更改属性名称，这真的很烦人。 - tnk479

Answer 2

文档中描述应该使用static而不是contentBase - 有关webpack的文档，请参见https://webpack.js.org/guides/development/#using-webpack-dev-server。

- svilkata