Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.

@cian6390

This comment has been minimized.

Copy link

commented Apr 7, 2017

hello there, thanks for share, I am new of webpack
I try make webpack watch and browersync work together
my solucation now is just using "NODE_ENV=development webpack --hide-modules --watch" and then use gulp run browserSync, it's like wepack only work for compile and gulp watch the result folder then do hot reload, yeah so I need to open two terminal tab,so I am tried make one command do two task together like your post ! but still not work .. I am no idea, can you give a help ? and sorry about my language my english is not will...

@wokung

This comment has been minimized.

Copy link

commented Apr 26, 2017

browser-sync-webpack-plugin offers a parameter:

  {
    // prevent BrowserSync from reloading the page 
    // and let Webpack Dev Server take care of this 
    reload: false
  }
@uxlead

This comment has been minimized.

Copy link

commented Sep 19, 2018

can we run php files on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.