Let's perform the following steps to add BrowserSync integration to our application's WebPack build process:

1. First, we will need to add the browser-sync-webpack-plugin to our project's webpack.config.js WebPack configuration. We'll set it up to work as a proxy for our normal application web server that is running on port 3000:

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

...
module.exports = {
  ...
  plugins: [
    ...
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3100,
      proxy: 'http://localhost:3000/'
    })
  ]
};

2. Now, we need to start a WebPack --watch process to enable synchronization with BrowserSync. We can do that using the watch:build NPM script in our project's package.json:

npm run watch:build

3. Now, WebPack and BrowserSync will automatically start running in the background. We can now start our Express web application as a separate process that the proxy will rely on:

npm start

4. With our application running, we can visit the BrowserSync client on our local machine. Visit http://localhost:3001, and you will be greeted with the BrowserSync Overview page. Click on the NEW TAB link under Local http://localhost:3100. This will launch a new tab that will seem identical to our Angular application running http://localhost:3000, except that you will see a black banner saying Connected to BrowserSync

5. Now, return to the BrowserSync overview page and copy the external URL to open it in another browser. If you have a mobile phone on the same internal network as your laptop, you should be able to even use that device's web browser. After connecting, you will see the same screen as your other browser, except for any differences in screen size or other vendor styling differences. Scroll your screen on one browser, and the screen on the other, will also scroll. Navigate to different pages of your application and watch as your interactions are mirrored over to your other browser in real time.