webpack dev server 出现“cannot get /”错误的排查与解决
使用Webpack Dev Server时，经常会遇到“Cannot GET /”的错误提示。这通常意味着服务器无法找到默认的入口文件。 本文将指导您如何解决此问题。
问题描述：
如上图所示，服务器返回“Cannot GET /”错误，表示服务器无法获取根路径“/”下的资源。
解决方案：
此错误通常源于Webpack配置问题或项目结构问题。请尝试以下步骤：
-
检查
dist目录： 确保项目根目录下存在dist目录（或您Webpack配置中指定的输出目录），并且该目录包含index.html文件。如果没有，请创建index.html文件。 -
检查Webpack配置 (HtmlWebpackPlugin)： 确认您已安装并正确配置
HtmlWebpackPlugin插件。这个插件负责生成index.html文件，并将打包后的JS文件等资源链接到该文件中。检查webpack.config.js文件中的插件配置，确保路径和文件名正确。 -
查看Webpack编译输出： Webpack在编译过程中可能会输出错误信息。仔细检查终端或控制台的Webpack编译输出，寻找任何错误或警告信息，这些信息通常能指引您找到问题的根源。
-
检查端口号： 确保Webpack Dev Server监听的端口号正确。在
webpack.config.js文件的devServer配置中检查端口号设置，并确保该端口未被其他程序占用。 如有必要，修改端口号并重新启动服务器。 -
重启服务器： 有时简单的重启Webpack Dev Server就能解决问题。关闭服务器进程，然后重新运行
npm start(或您使用的启动命令)。
通过以上步骤，您应该能够找到并解决“Cannot GET /”错误，顺利启动Webpack Dev Server。
