webpack-dev-server 启动后页面空白的解决方法-JavaScript中文网-JavaScript教程资源分享门户

如果你在使用 webpack-dev-server 进行前端开发时，启动后发现页面空白，那么你可能会尝试在浏览器中进行调试，查看控制台输出，但是可能仍然无法找到问题所在。在这篇文章中，我们将深入探讨这一问题的原因，并提供解决方案。

问题分析

webpack-dev-server 启动时，会在 http://localhost:8080/ 上创建一个虚拟的服务器，它会将 webpack 打包的结果放到内存中，并对其进行监听。当你访问该地址时，webpack-dev-server 会在内存中获取你的应用程序代码，并将其显示在浏览器中。在这个过程中，如果你发现页面空白，那么问题可能有以下几个方面：

缺少 index.html 文件或文件路径不正确。
缺少打包后的 JavaScript 文件或文件路径不正确。
端口号被屏蔽或端口号错误。

解决方案

确认文件路径

可以通过在命令行中输入命令查看 webpack-dev-server 所监听的路径：

webpack-dev-server --content-base <path to project>

这将启动 webpack-dev-server 并将它监听的路径设为指定项目的路径。确认该路径是否正确，如果路径不正确，则需要将其修正。

确认 webpack 配置

在 webpack 配置中，你需要确认打包后的文件是否与你在文件中引用的文件路径相对应。例如，如果你在 index.html 文件中引用了打包后的 JavaScript 文件：

<script src="./dist/bundle.js"></script>

那么你需要确认在 webpack 配置中，输出的打包路径是否设定为 dist：

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

确认端口号

确认 webpack-dev-server 所监听的端口号是否被其他应用程序屏蔽或者端口号是否正确。你可以在命令行中指定端口号：

webpack-dev-server --port <your port number>

或者在 webpack 配置中指定端口号：

module.exports = {
  devServer: {
    port: 8080
  }
}

禁用 host 检查

如果你使用了 webpack-dev-server 的配置项 devServer.host 参数，那么可能会出现页面空白的问题。这是因为默认情况下，webpack-dev-server 会检查请求头中的 Host 和 Origin 字段是否一致。如果不一致，则出现错误。在开发环境中，由于一些网络代理的缘故，这个检查可能会出现错误，导致页面空白。

为了解决这个问题，你可以通过将 devServer.disableHostCheck 设为 true，来禁用 Host 检查:

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

示例代码

-- -------------------- ---- -------
-- -----------------
--- ---- - ---------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  ---------- -
    ----- -----
    ------------ -------------------- ----------
    ----------------- ----
  -
-

总结

在使用 webpack-dev-server 进行开发时，出现页面空白的问题可能由文件路径、Webpack 配置、端口号设置等多方面原因所致。在本文中，我们对这些原因进行了分析，并提供了解决方案。我们希望这些信息能帮助你更加方便地进行前端开发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64cf9e82b5eee0b5256d4b20