webpack-dev-server运行时报错

今天在学习某webpack课程时，讲述到了使用wepack-dev-server开启本地服务器跑项目的时候，遇到了一个错误，本地开发环境如下:
系统环境为：Mac OS 10.12.6，webpack版本为: 3.12.0，webpack-dev-server版本为3.2.1
webpack.config.js的内容如下:

let path = require("path");
let webpack = require("webpack");
let ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");

module.exports = {
	entry: {
		app: "./src/app.js"
	},
	output: {
		path: path.resolve(__dirname, "./dist"),
		// publicPath: "./dist/",
		filename: "[name].bundle.js",
		chunkFilename: "[name].bundle.js" // 动态打包出来的文件名
	},
	module: {
		rules: [
			{
				test: /\.less$/,
				// 用style标签写入到html页面
				use: ExtractTextWebpackPlugin.extract({
					fallback: "style-loader",
					use: [
						"css-loader", 
						{
							loader: "postcss-loader",
							options: {
									ident: "postcss",   // 标明我下面用的这些插件是给postcss用的
									plugins: [
											require("postcss-sprites")({
												spritePath: 'dist/assets/img'
											}),
											require("postcss-cssnext")()        // 可以使用未来css语法
									]
							}
						},
						{
							loader: "less-loader"
						}
					]
				})
			},
			// 图片相关的处理
			{
				test: /\.(png|jpg|jpeg|gif)$/,
				use: [
					// 2. 使用url-loader，将图片都作为base64编码处理
					{
						loader: "url-loader",
						options: {
							limit: 1000,
							name: "[name].[ext]",
							publicPath: "../assets/img",
							useRelativePath: true  // 如果你希望为每个文件生成一个相对 url 的 context 时，应该将其设置为 true
						}
					},
					// 压缩图片
					{
						loader: "img-loader",
						options: {
							plugins: [
								require("imagemin-mozjpeg")({
									quality: 80
								})
							]
						}
					}
				]
			},
			{
				test: path.resolve(__dirname, "src/app.js"),
				use: [
					{
						loader: "imports-loader",
						options: {
							$: "jquery"
						}
					}
				]
			}
		]
	},
	plugins: [
		// 提取成单独文件
		new ExtractTextWebpackPlugin({
			filename: 'css/[name].min.css',
			allChunks: true
		}),
	]
}

然后我在命令行执行node_modules/.bin/webpack-dev-server来开启服务的时候，报了这个错误

Invalid configuration object. Webpack has been initialised using a configuration object that does not ma
tch the API schema. - configuration has an unknown property ‘mode’. 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? }
在网上查阅了相关资料，有的说是module.loaders需要改成module.rules，有的说是需要删掉项目依赖，然后重新安装一遍并且webpack-dev-server要全局安装，我仔细看了一下跟我的demo情况都不太符合，然后我看了一下****中的webpack-dev-server的版本是2.9.7的，而我安装的是v3.2.1的，我在想是不是版本兼容问题，然后去webpack-dev-server的github网站上查看了版本发布日志，发现了这个东西

在webpack-dev-server的3.0.0版本开始，只兼容webpack4及以上版本，不再兼容webpack3及一下版本了，然后我就将项目中的webpack-dev-server的npm包删掉，重新下载并且指定版本: npm install [email protected]，然后npm就帮我下了v2.9.7的包，然后我再运行一遍node_modules/.bin/webpack-dev-server就能成功开启服务器了。

所以以后遇到这种感觉不像是webpack配置问题，并且终端报错中没有明确指出是哪一块的问题的，可以仔细检查一下是否webpack或某些包和新版本的包存在某些兼容问题