Browser-Sync Webpack 插件使用教程

Browser-Sync Webpack 插件使用教程

browser-sync-webpack-pluginEasily use BrowserSync in your Webpack project.项目地址:https://gitcode.com/gh_mirrors/br/browser-sync-webpack-plugin

1. 项目的目录结构及介绍

browser-sync-webpack-plugin/
├── LICENSE
├── README.md
├── index.js
├── package.json
└── test/
    ├── fixtures/
    │   └── index.html
    ├── index.js
    └── mocha.opts

• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• index.js: 项目的主入口文件。
• package.json: 项目的依赖和配置文件。
• test/: 测试目录，包含测试文件和测试配置。
  • fixtures/: 测试用例的静态文件。
  • index.js: 测试主文件。
  • mocha.opts: Mocha 测试框架的配置文件。

2. 项目的启动文件介绍

项目的启动文件是 index.js，它是插件的主入口文件。该文件导出了一个类 BrowserSyncPlugin，用于在 Webpack 构建过程中启动 BrowserSync 服务。

const BrowserSync = require('browser-sync');
const bs = BrowserSync.create();

class BrowserSyncPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.done.tap('BrowserSyncPlugin', () => {
      bs.init(this.options);
    });
  }
}

module.exports = BrowserSyncPlugin;

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的依赖、脚本和其他元数据。

{
  "name": "browser-sync-webpack-plugin",
  "version": "1.0.0",
  "description": "BrowserSync plugin for Webpack",
  "main": "index.js",
  "scripts": {
    "test": "mocha"
  },
  "author": "Va1",
  "license": "MIT",
  "dependencies": {
    "browser-sync": "^2.26.14"
  },
  "devDependencies": {
    "mocha": "^8.3.0",
    "webpack": "^5.24.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 项目的主入口文件。
• scripts: 可执行的脚本命令。
• author: 项目作者。
• license: 项目许可证。
• dependencies: 项目运行时的依赖。
• devDependencies: 开发时的依赖。

browser-sync-webpack-pluginEasily use BrowserSync in your Webpack project.项目地址:https://gitcode.com/gh_mirrors/br/browser-sync-webpack-plugin