Getting set up with Browsersync and Webpack

browsersync-webpack.md

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.