[webpack-cli] Invalid options object错误-webpack-dev-server在项目根目录的终端启动报错Invalid options object

最新推荐文章于 2026-06-22 13:22:52 发布

原创最新推荐文章于 2026-06-22 13:22:52 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

学习记录

本文主要介绍了在使用webpack-cli版本4.10.0时遇到的两个错误。第一个错误是由于contentBase配置不再支持导致，解决方法是修改webpack配置。第二个错误是webpack 4.0要求指定运行模式，未设置模式导致浏览器页面报错，解决办法是在命令行中添加--mode development或--mode production来明确模式。

webpack-cli版本: 4.10.0

// win+r打开命令行查看webpack版本
webpack -v

1. 报错1如下：

[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? }

报错原因：新版本的webpack配置文件webpack.config.json格式调整了，不支持contentBase

解决办法：

// webpack.config.js文件中
devServer: {
    // 服务器打开目录
    contentBase: path.join(__dirname, 'dist'),
    // 压缩
    compress: true,
    // 端口
    port: 8080,
    // 自更新
    hot: true,
    // 自动打开浏览器
    open: true
}

改为

  devServer: {
    // 服务器打开目录
    // contentBase: path.join(__dirname, 'dist'),
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    // 压缩
    compress: true,
    // 端口
    port: 8080,
    // 自更新
    hot: true,
    // 自动打开浏览器
    open: true
  },

2. 报错2如下：浏览器页面报错

在这里插入图片描述

Compiled with problems:X

WARNING

configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.

报错原因：webpack4.0对语法要求更严格，要求在运行 webpack 时必须在 “开发或生产” 中选择一种模式，没有设置webpack模式，就会产生报错。
--mode development [开发环境]
--mode production [生产环境]

解决办法：

  // package.json文件中的“scripts”:{}中添加两行代码
  "scripts": {
    "dev": "webpack --mode development", 
    "build": "webpack --mode production"
  },

// webpack.config.js中的module.exports = {} 中添加模式
module.exports = {     
	devServer: {此处代码块省略},
    mode: 'development' // 设置mode
}

标签

#webpack #前端 #javascript