https://github.com/itgalaxy/browser-sync-dev-hot-webpack-plugin

Combines BrowserSync, webpack-dev-middleware, and webpack-hot-middleware into one plugin
https://github.com/itgalaxy/browser-sync-dev-hot-webpack-plugin

webpack webpack-dev-middleware webpack-hot-middleware webpack-plugin

Last synced: 8 months ago
JSON representation

Combines BrowserSync, webpack-dev-middleware, and webpack-hot-middleware into one plugin

• Host: GitHub
• URL: https://github.com/itgalaxy/browser-sync-dev-hot-webpack-plugin
• Owner: itgalaxy
• License: mit
• Created: 2017-02-14T10:34:36.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T10:07:36.000Z (about 3 years ago)
• Last Synced: 2025-04-26T07:27:00.488Z (11 months ago)
• Topics: webpack, webpack-dev-middleware, webpack-hot-middleware, webpack-plugin
• Language: JavaScript
• Homepage:
• Size: 1.31 MB
• Stars: 5
• Watchers: 4
• Forks: 3
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# browser-sync-dev-hot-webpack-plugin

[![NPM version](https://img.shields.io/npm/v/browser-sync-dev-hot-webpack-plugin.svg)](https://www.npmjs.org/package/browser-sync-dev-hot-webpack-plugin)

[![Travis Build Status](https://img.shields.io/travis/itgalaxy/browser-sync-dev-hot-webpack-plugin/master.svg?label=build)](https://travis-ci.org/itgalaxy/browser-sync-dev-hot-webpack-plugin)

[![dependencies Status](https://david-dm.org/itgalaxy/browser-sync-dev-hot-webpack-plugin/status.svg)](https://david-dm.org/itgalaxy/browser-sync-dev-hot-webpack-plugin)

[![devDependencies Status](https://david-dm.org/itgalaxy/browser-sync-dev-hot-webpack-plugin/dev-status.svg)](https://david-dm.org/itgalaxy/browser-sync-dev-hot-webpack-plugin?type=dev)

[![Greenkeeper badge](https://badges.greenkeeper.io/itgalaxy/browser-sync-dev-hot-webpack-plugin.svg)](https://greenkeeper.io/)

Combines `browser-sync`, `webpack-dev-middleware`, and `webpack-hot-middleware` into one plugin.

## Install

```shell

npm install --save-dev browser-sync-dev-hot-webpack-plugin

```

## Usage

```js

const BROWSER_SYNC_OPTIONS = {};

const DEV_MIDDLEWARE_OPTIONS = {

    publicPath: '/my/public/path'

};

const HOT_MIDDLEWARE_OPTIONS = {};

const webpackConfig = {

    // Some options...

    plugins: [

        // Other plugins...

        new BrowserSyncHotPlugin({

            browserSync: BROWSER_SYNC_OPTIONS,

            devMiddleware: DEV_MIDDLEWARE_OPTIONS,

            hotMiddleware: HOT_MIDDLEWARE_OPTIONS,

            callback() {

                console.log('Callback');

                /*

                    // Use browser sync server api (https://browsersync.io/docs/api)

                    const { watcher: bs } = this;

                    bs.notify("Hello! It's callback function from BrowserSyncHotPlugin!");

                */

            }

        })

        // Other plugins...

    ]

    // Some options...

};

module.exports = webpackConfig;

```

## Options

See related packages docs.

## Related

-   [browser-sync](https://github.com/browsersync/browser-sync) - Keep multiple browsers & devices

    in sync when building websites.

-   [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) - Offers a dev middleware for webpack,

    which arguments a live bundle to a directory.

-   [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) - Webpack hot reloading

    you can attach to your own server.

## Contribution

Feel free to push your code if you agree with publishing under the MIT license.

## [Changelog](CHANGELOG.md)

## [License](LICENSE)