解决 webpack dev server 打包无法刷新的问题-JavaScript中文网-JavaScript教程资源分享门户

背景

在前端开发中，我们通常使用 webpack 进行打包。而在开发过程中，我们通常使用 webpack dev server 进行调试。但是，有时候在修改文件后，webpack dev server 并不会自动刷新页面，这就导致我们需要手动刷新浏览器才能看到最新的修改。

这个问题在开发过程中非常烦人，因为它会浪费我们很多时间和精力。那么，如何解决这个问题呢？接下来，我们将深入探讨这个问题，并提供解决方案。

问题分析

在 webpack dev server 中，当我们修改文件后，webpack 会自动重新打包，但是页面并不会自动刷新。这是因为 webpack dev server 默认只会监测打包后的文件是否发生变化，而不会监测源文件是否发生变化。因此，当我们修改源文件后，webpack dev server 并不会自动刷新页面。

解决方案

要解决这个问题，我们需要让 webpack dev server 监测源文件的变化。有两种方法可以实现这个目标。

方法一：使用 webpack dev server 的 watchOptions

webpack dev server 提供了一个配置项叫做 watchOptions，它可以让 webpack dev server 监测源文件的变化。我们可以在 webpack.config.js 中进行如下配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  devServer: {
    watchOptions: {
      ignored: /node_modules/,
      poll: 1000,
    },
  },
};

这个配置项中，ignored 表示忽略监测的目录，poll 表示轮询间隔时间。当我们修改源文件后，webpack dev server 就会自动重新打包并刷新页面。

方法二：使用 webpack-dev-middleware 和 webpack-hot-middleware

另一种解决方案是使用 webpack-dev-middleware 和 webpack-hot-middleware。这两个中间件可以让我们在 webpack dev server 中启用热更新功能，从而实现源文件的自动刷新。

首先，我们需要安装这两个中间件：

npm install webpack-dev-middleware webpack-hot-middleware --save-dev

然后，在 webpack.config.js 中进行如下配置：

// javascriptcn.com 代码示例
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');

const compiler = webpack(config);

app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

app.use(webpackHotMiddleware(compiler));

这个配置中，webpackDevMiddleware 和 webpackHotMiddleware 分别表示 webpack-dev-middleware 和 webpack-hot-middleware 中间件。当我们修改源文件后，webpack dev server 就会启用热更新功能，并自动刷新页面。

总结

在前端开发中，webpack dev server 是一个非常有用的工具，它可以帮助我们进行调试和开发。但是，有时候它会出现打包无法刷新的问题，这会影响我们的开发效率。本文介绍了两种解决方案，希望能够帮助大家解决这个问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6581618cd2f5e1655dc95618