Skip to content

Instantly share code, notes, and snippets.

@bntzio
Forked from robinrendle/browsersync-webpack.md
Created April 12, 2018 06:25
Show Gist options
  • Save bntzio/0aa70f65c38d087812f952df6b8db12a to your computer and use it in GitHub Desktop.
Save bntzio/0aa70f65c38d087812f952df6b8db12a to your computer and use it in GitHub Desktop.
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment