Webpack 2 - Hot Module Replacement - CSS

What you will learn:

- How to setup Hot Module Replacement with Webpack 2
- How to hot reload your Sass and Css in development mode

Working Files
Note: these files also include changes that we will do in the next video:)

Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you!

THE BEST OF

SUBSCRIBE

LET'S CONNECT!
Ihatetomatoes

Petr Tichy

[poonampatil]

This tutorials are very helpful for me for understanding Wabpack concepts.!!Thank you for such a great work!

[charlyRoot]

I'm obsessed with this vid series. Totally taking me away from more important things but I don't care. Thought I would share this to help you with the yt algos.

[osamaabuomar]

thanks for your efforts man, keep it up

[serdar.d]

That css trick saved my life! Thank you very much

[wswebus]

Sooo easy and usefull! ^_^
Thank you!

[giacomoal]

Great, i can't wait for the next video. Could you explain in the next video how to fit HMR with BrowserSync? Thank you! :)

[kyon]

thank for your tutorial, now i understood how the webpack work and able to create my own boilerplate

[HousEnElectro]

Thank you for the tutorials. They are awesome! I am trying to follow your instructions while building a 3rd party widget. I am new at reactjs and am wondering if I am on a good track?

[stanxu]

hi Peter, thanks for your sharing . I got a problem about the hmr, you mentioned in the video that the hmr doesn't work with ExtractTextPlugin out of the box, what you mean about the box ?

[SimonRichardsonUK]

@Petr I really love the tuts.
I had some issues with hot module replacement on Windows. Once the environment variable had been set it would never change - so once set to "production" it stayed like that. I solved it with better-npm-run... code snippet below from package.json

"scripts": {
"dev": "better-npm-run build:dev",
"prod": "better-npm-run build:prod",
"clean": "rimraf ./dist/*"
},
"betterScripts": {
"build:dev": "webpack-dev-server",
"build:prod": {
"command": "npm run clean && webpack -p",
"env": {
"NODE_ENV": "production"
}
},
"test": {
"command": "karma start",
"env": {
"NODE_ENV": "test"
}
}
},

[duechilidance]

thanks for sharing!
how are you able to link the webpack config properties to the documenation like @ 1:51 ?
is it an extension?

[ksas]

Thank you, very helpful.
vielen Dank
شكرا

[kengresify]

Hi Peter. Awesome tutorial man. So how does HMR work with just javascript, if I'm not using React? just pure JS or jquery. thanks a lot for your help!

[i]

Thanks man, your tutorial save me from the webpack configuration hell xD.
I see you put '-CSS' on the title, so I assume this part only do HMR to sass compilation?
because HMR for JS still bothering me

[ksas]

how i can make "loop" like (gulp) to add footer, header, ...etc and other template in Home Page ; can i do that with webpack 2 ?
do you please have tips for me? if you can make Video, I appreciate help

[voyageruk]

Another great tutorial, where are you from Peter?

[jackkahn]

Hello Do you recommend using create-react-app ?

[oneeuro]

how to auto inject file (css/js) from bower_components to index.html using webpack

[waseemahmed]

Hello there,
Thanks for great videos. Can you show us how to use typescript with webpack and react?

[ElLevidente]

Seems like the documentation for this had either moved or changed.