A quick tip that will make your web development life x1000 easier.

in webpack •  7 years ago 
Hot Reloading.

It seems like one of those arcane settings caught in the depths of a config file, or one of those buzz words you see every now and again thrown around. In a sense it is kinda both. But it will save so much time it's a) hilarious how you coped without b) let's you focus on a whole new world of new bugs and problems.

Ever sick of hitting the refresh button every time you change a CSS colour, or padding value, or slight change to your script? Like you do this more times than actually paying attention to focusing on improving the app your working on? Hot reloading will automagically refresh this, all while keeping state of your variables!!

It's easy to get this feature enabled if you come from a JavaScript background & use webpack. (Check my profile for more JS how-to's).

The crux is to npm install webpack-dev-server --save-dev (source: https://www.npmjs.com/package/webpack-dev-server) and ensure you have the -hot flag passed to webpack-dev-server's invocation in your package.json.

For example here's a live snippet from my commonly used package.json:

"scripts": {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot"
}

So, going npm run dev gives me a fantastic amount of time-saving ability.

Message me if you need any help getting it set up!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!