介绍
@infowatch/browser-sync-webpack-plugin 是一个基于 BrowserSync 的 Webpack 插件，它可以帮助前端开发人员创建更好的开发体验，同时提供更好的自动化工作流。该插件支持实时重载，CSS 注入和多设备同步浏览器。
安装
你可以通过以下 npm 命令来安装 @infowatch/browser-sync-webpack-plugin：
npm install @infowatch/browser-sync-webpack-plugin --save-dev
使用
@infowatch/browser-sync-webpack-plugin 的使用非常简单，只需要在 webpack 配置文件中引入插件即可：
-- -------------------- ---- -------
----- ----------------- - --------------------------------------------------
----- ------------- - -
-- ---
-------- -
--- -------------------
----- ------------
----- -----
------ -----------------------
--
-
-- ---
-配置项
@infowatch/browser-sync-webpack-plugin 支持以下配置项：
host
- 类型: String
- 默认值: 'localhost'
用于指定 Browsersync 运行的主机名。
port
- 类型: Number
- 默认值: 3000
用于指定 Browsersync 运行的端口号。
proxy
- 类型: String
- 默认值: ''
用于指定 webpack-dev-server 运行的 URL。
files
- 类型: String/Array[String]
- 默认值: []
用于指定需要同步的文件路径，可以使用 glob 表达式。
reloadDebounce
- 类型: Number
- 默认值: 2000
用于指定自动重载的延迟时间，以避免频繁重载造成的性能问题。
injectCss
- 类型: Boolean
- 默认值: true
用于指定是否自动注入 CSS 样式。
notify
- 类型: Boolean
- 默认值: false
用于指定是否开启通知功能。
示例代码
-- -------------------- ---- -------
----- ----------------- - --------------------------------------------------
----- ------------- - -
-- ---
-------- -
--- -------------------
----- ------------
----- -----
------ ------------------------
------ -
------------
-----------
---------
--
--------------- -----
---------- -----
------- -----
--
-
-- ---
-结论
@infowatch/browser-sync-webpack-plugin 可以大大提高前端开发人员的工作效率，提供更好的自动化工作流，支持实时重载，CSS 注入和多设备同步浏览器。此外，它还有丰富的配置项可供选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e2441b2