Getting set up with Browsersync and Webpack

Fixing our local environment with Browsersync

Whenever we change our templates we still have to use our build script and this can get annoying. Thankfully with webpack-dev-server and BrowserSync we can fix this:

npm i -D browser-sync browser-sync-webpack-plugin webpack-dev-server

BrowserSync will act like a proxy, waiting for webpack to do its thing and then reloading the browser for us.

We’ll need to include it in our webpack.config.js:

var BrowserSyncPlugin = require('browser-sync-webpack-plugin')

And then add it to our plugins at the bottom of the same file:

plugins: [
    new ExtractTextPlugin("styles.css"),
    new StaticSiteGeneratorPlugin('main', data.routes, data),
    new BrowserSyncPlugin({
        host: 'localhost',
        port: 3000,
        proxy: 'http://localhost:8080/'
    })
]

Now we can update our package.json script:

"scripts": {
	"dev": "webpack-dev-server --progress --colors",
	"start": "webpack && npm run dev"
},

So when we run our npm start command BrowserSync will open up our browser and refresh itself whenever we change a component.

j-tap/browsersync-webpack.md

Fixing our local environment with Browsersync