Skip to content

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

License

Notifications You must be signed in to change notification settings

itgalaxy/browser-sync-dev-hot-webpack-plugin

Repository files navigation

browser-sync-dev-hot-webpack-plugin

NPM version Travis Build Status dependencies Status devDependencies Status Greenkeeper badge

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

Contribution

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