MEAN Cookbook

How to do it...

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, ...