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

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

webpack-cli: Invalid options object. Dev Server has been initialized using an options object

npm

reactjs

webpack

webpack-dev-server

redux