Skip to content

Instantly share code, notes, and snippets.

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.


This comment has been minimized.

Copy link

@cian6390 cian6390 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...


This comment has been minimized.

Copy link

@wokung wokung 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

This comment has been minimized.

Copy link

@uxlead uxlead commented Sep 19, 2018

can we run php files on this?


This comment has been minimized.

Copy link

@AlonsoK28 AlonsoK28 commented Jun 24, 2021

can we run php files on this?

I am also trying to know if it is possible to do this

I have a PHP project but the frontend is made with Webpack 4

I think it might be possible to at least replace the bundle's CSS / JS files using the HRM functionality of Webpack

Could you contact me to know more about it?

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