webpack-dev-server无法正常运行求助，附配置文件与报错信息

• 配置项版本不兼容：你使用的webpack-dev-server@4.4.0属于v4版本，该版本已废弃v3的contentBase、watchContentBase配置项，需替换为static配置
• 配置值错误：原contentBase用于指定静态资源服务的根目录，你错误配置为单个文件./dist/app.js，需调整为dist目录路径

修正后的webpack devServer配置 #

// 先确保配置文件顶部已引入path模块，未引入请添加这行
const path = require('path')

devtool: 'inline-source-map',
devServer: {
    static: {
        // 指定静态资源根目录为dist文件夹
        directory: path.resolve(__dirname, './dist'),
        // 对应原watchContentBase功能，监听目录下文件变化
        watch: true
    },
    compress: true,
    port: 3000,
    open: true,
    hot: true
}

修改完成后重新执行npm run dev即可正常启动服务。

内容的提问来源于stack exchange，提问作者Arman Dezfuli