webpack 之 webpack5 webpack-dev-server 版本兼容问题

在写 从 0 创建一个 webpack 5 项目 这篇文章时遇到的这个问题，在终端执行 npm run dev ， 怎么样都起不来服务，还给我报这样的一个错误：

首先按照国际惯例，先报一下存在兼容问题时的版本和配置：

"webpack": "^5.10.3",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",

// webpack.dev.js

module.exports = {
  // ...
  // 配置 dev-server, 就会帮我们开启自动刷新这个功能
  // 自动刷新与热更新的不同：自动刷新保存修改后，整个页
  // 面会自动刷新来加载最新的改动，状态会丢失，而热更新
  // 是新代码生效，网页不刷新，状态不丢失，有优有劣，酌
  // 情使用。
  devServer: {
    port: 3000, // 默认开启本地服务的端口号
    progress: true, // 显示打包的进度条
    open: true, // 自动打开浏览器
    contentBase: distPath, // 根目录
    compress: true, // 启动 gzip 压缩

    // 设置代理 —— 如果有需要的话
    proxy: {
      // 将本地的 /api/xxx 代理到 localhost:3000/api/xxx
      '/api': 'http://localhost:3000',
      // 将本地的 /api2/xxx 代理到 localhost:3000/xxx
      '/api2': {
        target: 'http://localhost:3000',
        '^api/': ''
      }
    }
  }
}

当我信心满满在控制台敲下 npm run dev 这行命令，并成就感十足地按下 enter 键，准备享受自动弹出页面的那种快感时，一个错打醒了我：

好家伙，不合法，那我把 contentBase 这个参数先注释掉，   再运行 npm run dev 命令：

换成了 progress 这个配置项不合法，那我再注释掉：

当我以为看到了胜利的曙光时，重头戏来了，没错就是开头提到的这个问题，版本导致的错误：

利用排除法我猜到可能时版本兼容性的问题，因为从webpack 4 -> 5，可能有部分版本兼容性的问题还有待解决，于是乎我上网查询了一下：“webpack5 webpack-dev-server 版本”，下面看到有这样一条回答 webpack5 webpack-dev-server 版本兼容 - 阿梅M - 博客园 ，so，我也尝试了下降版本：

npm uninstall webpack-dev-server
npm install webpack-dev-server@3.11.2 -D
npm run dev

运行一下，芜湖~，完美起飞，再把刚才注释掉的两个配置项再解开，运行，又是完美起飞，perfect~

Speaking of this，顺大便再说一下其他问题：比如运行 npm run build 或 npm run dev 时报这样的错误时，可能是我们的配置项的拼写有误：

检查一下我们的 module 是否不小心加了 s ，变成了 modules 啊，或者我们的 use 写成了 user 啊，这些拼写错误，我运行的时候就遇到了第二个问题，慢慢排除找才找到的。果然往往这种神学的问题，都是细小的错误造成的（tiny mistakes / tiny errors）。