Javascript & Webpack报错：未知选项'--watch-content-base'问题求助

你使用的webpack-dev-server是4.x版本，该版本对配置项做了不兼容升级，旧3.x版本中使用的--watch-content-base启动参数已被正式移除，所以执行命令时会报未知参数错误。教程能正常运行是因为使用的是3.x版本的webpack-dev-server。

方案1：直接修改启动命令 #

将package.json中scripts下的start字段修改为：

"start": "webpack-dev-server --static-watch --open"

--static-watch是4.x版本中对应原--watch-content-base的替代参数，开启后会监听静态资源目录的变更，搭配默认已开启的热更新能力，即可实现代码修改后服务自动同步更新的效果。

方案2：通过配置文件统一管理（更推荐） #

在项目根目录新建webpack.config.js文件，写入以下配置：

module.exports = {
  devServer: {
    static: {
      watch: true // 开启静态资源监听，等价于原watchContentBase: true
    },
    open: true, // 启动后自动打开浏览器
    hot: true // 显式开启热更新，默认已开启，可避免特殊场景下失效
  }
}

修改package.json中的start命令为：

"start": "webpack-dev-server"

该方式配置结构更清晰，后续需要添加其他devServer配置时也更易维护。

修改完成后重新执行npm start即可正常启动，同时保留所有你需要的自动更新功能。

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