Skip to content

Instantly share code, notes, and snippets.

@robinrendle
Last active September 17, 2024 16:58
Show Gist options
  • Save robinrendle/0bb0b9e55fafa1cc0c64ff4b5776df05 to your computer and use it in GitHub Desktop.
Save robinrendle/0bb0b9e55fafa1cc0c64ff4b5776df05 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.

@cian6390
Copy link

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

@wokung
Copy link

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
  }

@legotail
Copy link

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