启动webpack serve服务时出现webpack-dev-server模块解析失败该如何解决

所有报错均来自webpack.common.js的模块解析配置缺失。
你将公共配置中的resolve.extensions仅设置为[".ts"]，意味着webpack解析模块时，只会自动尝试匹配.ts后缀的文件，所有非.ts后缀的模块都不会被自动补全后缀查找。
这直接导致了所有报错：

• 报错找不到的strip-ansi是第三方npm包，入口为.js格式
• 报错找不到的./socket、./overlay、./utils/log等路径，全是webpack-dev-server客户端目录下的.js文件
  这些文件均不匹配现有.ts的解析规则，webpack无法自动定位文件路径，因此抛出模块找不到错误。
  你观察到不使用serve时打包流程正常，是因为打包时的入口都是你编写的.ts文件，完全匹配现有resolve规则，不会触发js文件的解析逻辑。开启dev服务时，webpack会自动注入dev-server的纯js客户端脚本，直接触发上述解析问题。
  开启hot reload时报错增多，也是同一原因：hot reload逻辑注入的额外脚本全为js文件，全部无法被现有resolve规则匹配，因此会刷出大量依赖缺失的报错。

• 修改webpack.common.js中的resolve配置，补全js生态通用的解析后缀：

  resolve: {
    extensions: [".ts", ".js", ".mjs", ".json"],
  }
  

• 配置修正后无需重装依赖，直接重新启动开发服务即可。当前项目的版本组合（webpack5 + webpack-cli4 + webpack-dev-server3.11.2）本身是兼容的，不需要额外调整依赖版本。

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