BrowserSync Webpack Plugin

const path = require('path');
const webpack = require('webpack');
const BrowserSyncPlugin = require('browsersync-webpack-plugin');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

module.exports = {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client?reload=true', // HMR client
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/' // Crucial for webpack-dev-middleware
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(), // Good practice with HMR
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        host: 'localhost',
        port: 3000,
        proxy: 'http://localhost:8080/', // Proxy Webpack Dev Server
        open: false // Prevent BrowserSync from opening a new browser tab automatically
      },
      // plugin options
      { reload: false } // Let Webpack Dev Server handle reloads
    )
  ],
  devServer: {
    port: 8080, // Webpack Dev Server port
    hot: true,
    static: { // Or `contentBase` for Webpack 4 and earlier
      directory: path.join(__dirname, 'public'),
    },
    // This devServer config might be ignored when running via custom server and middleware
    // The middleware approach below takes precedence
  }
};

// To run this setup, you typically need a custom Node.js server (e.g., Express).
// A simplified `server.js` for illustration:
/*
const express = require('express');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
const compiler = webpack(webpackConfig);
const app = express();

app.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: { colors: true }
}));

app.use(webpackHotMiddleware(compiler));

// Serve static assets from 'public' if not proxied
app.use(express.static(path.join(__dirname, 'public')));

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Webpack Dev Server listening on port ${PORT}`);
});
*/