webpack4升级至webpack5出现options含未知属性'inline'报错如何解决

错误原因 #

你升级后使用的webpack-dev-server v4版本对配置项做了不兼容更新，两个配置项失效：

• v4版本完全移除了原v3版本中的inline配置项，自动注入刷新脚本的特性现在默认启用，无需手动配置
• 原contentBase配置项已重命名为static

解决方案 #

修改你配置中的devServer部分：

1. 删除inline: true这一行
2. 将contentBase替换为static

修改后的devServer配置示例：

devServer: {
    static: path.join(__dirname, "public"),
    compress: true,
    port: 9000,
    historyApiFallback: true
},

可选优化（非必须） #

webpack5内置了资源模块能力，你可以移除file-loader依赖，改用内置的asset/resource类型处理静态资源，减少第三方依赖：

{
    test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg|ico)$/i,
    type: 'asset/resource'
}

内容的提问来源于stack exchange，提问作者May'Habit