Combines browser-sync, webpack-dev-middleware, and webpack-hot-middleware into one plugin.
npm install --save-dev browser-sync-dev-hot-webpack-pluginconst 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;See related packages docs.
-
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.
Feel free to push your code if you agree with publishing under the MIT license.