Getting set up with Browsersync and Webpack
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.