如何在webpack-dev-server中配置contentBase与publicPath？启动失败求助

• 检查启动脚本配置
  打开package.json，确认scripts里的dev命令是否正确：

  "scripts": {
    "dev": "webpack serve"
  }
  

  webpack 5及以上版本用webpack serve，旧版本用webpack-dev-server，别搞混。

• 核对webpack配置文件的devServer项
  确保配置里包含必要的devServer设置，示例：

  const path = require('path');
  
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist')
    },
    devServer: {
      static: './dist',
      hot: true,
      open: true
    }
  };
  

• 修复版本兼容问题
  从你提供的截图报错Error: Cannot find module 'webpack-cli/bin/config-yargs'来看，是webpack-cli和webpack-dev-server版本不匹配导致的。执行以下命令升级webpack-cli：

  npm install webpack-cli --save-dev
  

  若还是不行，卸载现有依赖后重装：

  rm -rf node_modules package-lock.json
  npm install
  

• 验证依赖安装状态
  执行npm list webpack webpack-cli webpack-dev-server，确认三个包的版本互相兼容（webpack 5对应webpack-dev-server 4+、webpack-cli 4+）。

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