How do I set up BrowserSync with Webpack?

How do I set up BrowserSync with Webpack?

To set up BrowserSync with Webpack, you'll need to install BrowserSync and configure it in your Webpack config file.

What commands do I need to run to install BrowserSync?

You can install BrowserSync using npm with the command: npm install browser-sync --save-dev.

How do I configure BrowserSync in my Webpack config?

In your Webpack config, you can add BrowserSync as a plugin and set it up to watch your files for changes.

Can you show me an example of the configuration?

Sure! Here's a basic example:

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  // other config options...
  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      files: ['dist/*.html'],
      server: { baseDir: ['dist'] }
    })
  ]
};