webpack-cli：选项对象无效。开发服务器已使用选项对象初始化

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? }

这里有什么问题以及如何解决它？谢谢。

Answer 1

代替

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

使用：

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