在前端开发中，我们通常需要实时预览我们所编写的代码。为了实现这个目标，有很多类似的工具可用。其中一个非常流行的工具就是 browser-sync。它可以在我们修改代码时自动刷新浏览器，并且能够立即看到更新的效果。
在本文中，我们将介绍如何使用 browser-sync-webpack 这个 npm 包来实现自动刷新浏览器的功能。
安装
首先，你需要在你的项目中安装 browser-sync-webpack。你可以通过在终端或命令行中输入以下命令来完成此操作：
npm install browser-sync-webpack --save-dev
配置
接下来，你需要配置 browser-sync-webpack。你需要在 webpack.config.js 文件中添加一些代码。
假设我们的项目结构如下：
project/ |- src/ |- |- index.html |- |- main.js |- webpack.config.js |- package.json
在 webpack.config.js 文件中，添加以下代码：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
-- -------
-------- -
--- -------------------
----- ------------
----- -----
------- - -------- -------- --
------ --------------------- -----------------
--
-
--这个配置告诉了 browser-sync-webpack 插件一些重要信息，包括：
host：browser-sync服务器的主机名，默认为localhost。port：browser-sync服务器的端口号，默认为3000。server：告诉browser-sync服务器应该从哪个目录中提供静态文件。files：告诉browser-sync监听哪些文件的更改，以便重新加载页面。
在上面的配置中，我们使用了 host 和 port 来指定 browser-sync 服务器的地址和端口。我们还使用了 server 属性，告诉 browser-sync 去哪里找到我们的网站文件。最后，我们使用 files 属性告诉 browser-sync 哪些文件应该被监听和重新加载。
使用
我们已经完成了 browser-sync-webpack 的配置，现在我们可以使用它了。在终端或命令行中，输入以下命令来启动 webpack-dev-server：
npm run dev
现在，当你编辑你的 HTML 或 JavaScript 文件时，browser-sync 会自动重新加载页面并显示最新更改。当然，此时你需要在浏览器中访问 http://localhost:3000。
总结
在本文中，我们介绍了如何使用 browser-sync-webpack npm 包来实现实时预览网页的功能。我们讨论了如何安装和配置插件，并提供了示例代码。现在你可以通过 npm run dev 命令来启动你的 webpack-dev-server，然后立即看到你的代码更新的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde522d