Hey，我明白你配置Webpack时的头疼——先是被要求装webpack-cli，装了之后跑webpack-dev-server又报错，简直连环打击！别担心，我帮你一步步拆解解决：

首先说第一个提示：

The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI.

这个其实是Webpack 4+的正常操作，官方把CLI工具从核心包拆出来单独维护了，所以你按照提示装npm install -D webpack-cli是完全正确的，这一步没问题。

接下来重点解决webpack-dev-server的报错问题，我整理了几个最容易踩的坑和对应的解决方案：

1. 先检查版本兼容性——这是90%报错的根源 #

Webpack、webpack-cli、webpack-dev-server这三个家伙版本必须匹配，不然就会闹脾气。比如Webpack 5和旧版的webpack-dev-server根本不兼容，直接给你报错。

• 先看看你当前项目里装的版本：
  在项目根目录跑这个命令：

  npm list webpack webpack-cli webpack-dev-server
  

• 给你两组经过验证的兼容版本组合，直接抄作业就行：
  • 如果你用Webpack 4（比较稳定，适合新手）：

    npm install -D webpack@4 webpack-cli@3 webpack-dev-server@3
    

  • 如果你想尝鲜Webpack 5：

    npm install -D webpack@5 webpack-cli@4 webpack-dev-server@4
    

2. 别混用全局和局部包——容易搞出路径混乱 #

很多人习惯全局装Webpack，但其实项目里最好只用局部安装的依赖，不然全局和局部版本不一致，调用的时候就会出现路径错误。

• 先把全局的相关包卸载（如果有的话）：

  npm uninstall -g webpack webpack-cli webpack-dev-server
  

• 然后通过package.json的scripts来调用命令，而不是直接在终端敲webpack-dev-server——这样会自动用项目局部的包，不会出错。

3. 正确配置package.json的scripts #

直接敲webpack-dev-server会让系统找不到局部安装的包路径，所以一定要在package.json里加scripts：

打开你的package.json，在scripts里加上：

{
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }
}

之后启动开发服务器就跑这个命令：

npm run start

这样就不会出现路径相关的报错了。

4. 检查你的webpack.config.js有没有语法错误 #

报错里提到了webpack.config...，说明配置文件可能有问题：

• 确保webpack.config.js在项目根目录，文件名别写错（比如写成Webpack.config.js，虽然Windows不敏感，但最好统一小写）。
• 检查配置里有没有语法错误，比如漏了逗号、括号，或者没装对应的loader。给你一个React项目的基础配置示例，你可以对照着改：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 你的入口文件路径
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 处理js和jsx文件
        exclude: /node_modules/,
        use: 'babel-loader' // 需要装babel相关依赖
      },
      {
        test: /\.css$/, // 处理css文件
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'] // 导入时可以省略后缀
  },
  devServer: {
    hot: true, // 热更新
    open: true // 自动打开浏览器
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' // 你的html模板路径
    })
  ]
};

记得装这些依赖：

npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react style-loader css-loader html-webpack-plugin

5. 终极方案：清理依赖缓存 #

如果以上都没用，可能是node_modules里的依赖损坏了，直接清理重装：

• 删除node_modules和package-lock.json：

  rm -rf node_modules package-lock.json
  

• 重新安装所有依赖：

  npm install
  

按照这些步骤一步步来，应该就能解决你的问题啦！

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