How to use browser-sync-webpack-plugin - 4 common examples

// If production argument was specified then add UglifyJS plugin into webpack.
    if (args.hasOwnProperty('is-production') && args['is-production'] === true) {
        scriptSettings.webpackSettings.plugins.push(
            new webpack.optimize.UglifyJsPlugin(scriptSettings.uglifySettings)
        );
    }

    // Asking webpack to watch will keep the process running until it's cancelled.
    // It will also start up a BrowserSync server which hosts the `dist` folder.
    if (taskOptions.watch) {
        scriptSettings.webpackSettings.watch = true;

        if (args.hasOwnProperty('serve') === false || (args.hasOwnProperty('serve') && args.serve !== false)) {
            scriptSettings.webpackSettings.plugins.push(
                new BrowserSyncPlugin(scriptSettings.browserSyncSettings)
            );
        }
    }

    // Open a stream, trigger webpack-stream compilation and push output to file system.
    return gulp.src([])
               .pipe(webpackStream(scriptSettings.webpackSettings))
               .pipe(gulp.dest(globalSettings.destPath + scriptSettings.genericOutputFolder));
}

path.join(Dir.src, entry, 'client'),
      ],
    },
    output: {
      path: '/',
      publicPath: '/',
      filename: 'bundle.js',
    },
    plugins: [
      new FriendlyErrorsWebpackPlugin({
        clearConsole: true,
        compilationSuccessInfo: {
          messages: logServerConfigWebpack(entry),
        },
      }),
      new BrowserSyncPlugin({
        host: getenv('BROWSERSYNC_HOST'),
        port: getenv('BROWSERSYNC_PORT'),
        proxy: webhost(entry),
      }, { reload: false }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
    ],
  };
}

},
    plugins: [
        new HtmlWebpackPlugin({ filename: 'index.html', template: `${__dirname}/src/client/index.html`, hash: true }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(env),
            'process.env.VERSION': JSON.stringify(gitRevisionPlugin.version()),
        }),
        new ExtractTextPlugin({ filename: '[name].css', allChunks: false }),
        new UglifyJsPlugin({ uglifyOptions: { output: { comments: false } } }),
        new CopyWebpackPlugin([{ from: './static/' }]),
    ],
};

if (env === 'development') {
    config.plugins.push(
        new BrowserSyncPlugin({ proxy: `http://0.0.0.0:${port}`, open: false }),
        new BundleAnalyzerPlugin({ openAnalyzer: false, defaultSizes: 'gzip', analyzerMode: 'static' }),
    );
}

export default config;

transform(content) {
                    return content
                        .toString()
                        .replace(/{{VERSION}}/g, VERSION)
                        .replace(/{{CHANGELOG}}/g, CHANGELOG);
                },
            },
        ]),
        new CheckerPlugin(),
    ]);

    if (IS_PRODUCTION) {
        plugins.add(new ProgressPlugin());
    } else {
        plugins.add(
            new BrowserSyncPlugin({
                proxy: 'localhost:8080',
                open: false,
                reloadDebounce: 2000,
                port: 3005,
                notify: false,
            }),
        );
    }

    const TS_BASE_CONFIG = {
        silent: argv.json,
        useCache: !IS_PRODUCTION,
        cacheDirectory: path.resolve(
            __dirname,
            'node_modules/.cache/awesome-typescript-loader',
        ),