Webpack-dev-server 编译文件但不刷新页面或将编译的 JavaScript 提供给浏览器-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 Webpack 作为打包工具已经成为了常规操作。而其中一个重要的功能是 webpack-dev-server，它可以提供一个本地服务器并实时编译代码，以便我们能够在开发过程中看到更改后的效果。但是，有时候我们会遇到一个问题：文件被编译了，但是网页并没有刷新或者编译的 JavaScript 并没有被提供给浏览器。

问题原因

这个问题通常出现在以下情况中：

你在配置文件中设置了 watchOptions 导致了监听文件变化但不会自动刷新网页。
你的项目中需要手动触发重新加载页面或更新 DOM 才能看到更改后的效果。
你在引入模块时使用了绝对路径而不是相对路径，导致热更新无法生效。

解决方案

解决这个问题的方法取决于你遇到的具体情况。下面列举了一些可能的解决方案。

方案一：关闭 Watch 模式

如果你在 webpack.config.js 中配置了 watchOptions，那么可能会出现这个问题。解决方法是删除该配置项或将其设置为 false。这将关闭 Webpack 的监听模式，因此每次你修改代码时，服务器都会重新编译并刷新浏览器。

示例代码：

// webpack.config.js

module.exports = {
  //...
  watchOptions: false,
  //...
};

方案二：启用热更新

如果你没有手动触发重新加载页面，那么可能是因为你的项目没有启用热更新。在 webpack-dev-server 中启用热更新非常简单，在配置文件中添加以下几行代码即可：

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

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

这会告诉 webpack-dev-server 启用热更新功能。现在，当你修改代码时，服务器将在不刷新浏览器的情况下重新编译并将更改后的模块提供给浏览器。

方案三：使用相对路径引入模块

有时候，使用绝对路径引入模块可能会导致热更新无法生效。如果你遇到了这个问题，可以尝试使用相对路径引入模块。

示例代码：

// 错误示范

import { someModule } from "src/someModule";

// 正确示范

import { someModule } from "../someModule";

结论

webpack-dev-server 是一个非常有用的工具，可以帮助我们在开发过程中实时查看更改后的效果。但有时候它可能会出现一些问题，比如编译后无法自动刷新页面或者将编译的 JavaScript 提供给浏览器。本文介绍了三种解决方案，你可以根据自己的情况选择合适的方法来解决这个问题。

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