webpack-dev-server本地localhost无内容显示问题求助

1. 先确认基础运行状态 #

• 启动dev-server后，查看终端是否有报错，比如端口占用、编译语法错误等，重点关注红色提示信息。
• 打开浏览器控制台（F12），检查是否有资源加载失败、404等报错，这类信息能直接指向问题根源。

2. 检查webpack.config.js核心配置 #

重点核对以下关键字段：

• devServer配置：
  • 确认static（webpack 5+）或contentBase（webpack 4及以下）指向正确的静态资源目录，比如index.html在项目根目录时：

    devServer: {
      static: './',
      open: true,
      port: 8080,
      hot: true
    }
    

  • 确保端口未被占用，可尝试修改port值测试。
• entry与output配置：
  • 确认entry指向的入口文件存在且无语法错误；output.path和filename配置符合项目文件结构。
• HtmlWebpackPlugin插件：
  • 如果使用该插件，必须配置template指向你的index.html文件，示例：

    new HtmlWebpackPlugin({
      template: './index.html'
    })
    

  • 未使用该插件时，需保证dev-server的静态目录能直接访问到index.html。

3. 检查package.json的启动命令 #

确认scripts中的dev命令与webpack版本匹配：

• webpack 5+：

  "scripts": {
    "dev": "webpack serve --mode development"
  }
  

• webpack 4及以下：

  "scripts": {
    "dev": "webpack-dev-server --mode development"
  }
  

4. 检查index.html内容 #

• 若使用HtmlWebpackPlugin，无需手动引入js文件，插件会自动注入；未使用时，需保证script标签的src路径与output.filename对应，比如：

  <script src="./main.js"></script>
  

• 避免使用绝对路径，采用相对路径适配dev-server的运行根目录。

5. 其他排查点 #

• 换端口启动服务，比如执行webpack serve --port 3000，排除端口占用问题。
• 用浏览器无痕模式打开localhost，排除缓存干扰。
• 确认本地防火墙、杀毒软件未拦截localhost请求。

请补充你的配置文件代码、终端运行日志以及浏览器控制台报错信息，以便精准定位问题。

内容的提问来源于stack exchange，提问作者Zain Zahid