Webpack configuration error (unknown property 'devServe'.)

< H2 > webpack runtime error configured according to tutorial < / H2 >

basic configuration

const path = require("path")

const config = {
    target: "web",
    entry: path.join(__dirname, "../src/index.js"),
    output: {
        filename: "bundle.[hash:8].js",
        path: path.join(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.jsx$/,
                loader: "babel-loader"
            },
            {
                test: /\.jsx$/,
        loader: "babel-loader",
        exclude: /node_modules/
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 1024,
                            name: "resources/[path][name].[hash:8].[ext]"
                        }
                    }
                ]
            }
        ]
    }
}

module.exports = config

Development environment configuration

const path = require("path")
const webpack = require("webpack")
const isDev = process.env.NODE_ENV === "development"
const baseConfig = require("./webpack.config.base")
const merge = require("webpack-merge")
const defaultPlugins = [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: isDev ? ""development"" : ""production""
    }
  })
]
const devServe = {
    port: 8000,
    host: "0.0.0.0",
    overlay: {
        errors: true
    },
    hot: true,
    open: true
}

let config
if (isDev) {
    config = merge(baseConfig, {
        devtool: "cheap-module-eval-source-map",
        module: {
            rules: [
                {
                    test: /\.styl/,
                    use: [
                        "style-loader",
                        "css-loader",
                        {
                            loader: "postcss-loader",
                            options: {
                                sourceMap: true
                            }
                        },
                        "stylus-loader"
                    ]
                }
            ]
        },
        devServe,
        plugins: defaultPlugins.concat([
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoEmitOnErrorsPlugin(),
            new HTMLPlugin()
        ])
    })
}

Environment dependence

"devDependencies": {
    "babel-loader": "^8.0.4",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.1.1",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^2.11.3",
    "webpack-merge": "^4.1.4"
  }

run error

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property "devServe". These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           devServe: ...
         }
       })
     ]

webpack is obviously 3.12.0, why do you still say what is wrong with webpack 2, no longer allows custom properties, and devServer? it is still wrong to follow the tutorial. Ask for advice.