browser-sync-dev-hot-webpack-plugin

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

Install

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

Usage

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 - Keep multiple browsers & devices in sync when building websites.

• webpack-dev-middleware - Offers a dev middleware for webpack, which arguments a live bundle to a directory.

• 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

License