如何使用webpack-dev-server运行Preact应用并解决npm run start报错问题

• 第一步：清理并重新安装依赖
  先删除本地的node_modules文件夹以及package-lock.json/yarn.lock等锁文件，执行npm install重新拉取所有依赖，避免依赖缺失或者版本冲突问题。
• 第二步：修正package.json的启动脚本
  webpack-dev-server v4及以上版本废弃了旧的直接调用webpack-dev-server的启动方式，需要将start脚本修改为如下格式：
  "start": "webpack serve --mode development --hot --open"
  如果需要指定配置文件，加上--config webpack.config.js参数即可。
• 第三步：调整webpack配置的devServer规则
  打开项目的webpack配置文件，删除devServer配置项中已经废弃的inline、contentBase等旧属性，inline功能在v4+版本已默认开启，原来的contentBase要替换为static字段指定静态资源路径。
• 第四步：校验Preact编译配置
  确保项目babel配置中正确配置了React语法转译的pragma指向Preact的渲染函数，示例babel配置如下：

  {
  "presets": [
  ["@babel/preset-react", {
  "pragma": "h",
  "pragmaFrag": "Fragment"
  }]
  ]
  }
  也可以直接安装@babel/preset-preact依赖，替换上面的preset配置，减少手动配置出错概率。

• 第五步：升级兼容版本依赖
  如果以上操作完成后还是启动失败，执行如下命令安装最新兼容版本的核心依赖：
  npm i webpack webpack-cli webpack-dev-server preact @prefresh/webpack -D

完成以上操作后重新执行npm run start即可正常启动Preact开发服务。

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