BASIC BABEL + SCSS WORKFLOW | Webpack 2 Basics Tutorial

Learn Webpack 2 - what it is, how it works and how to use it!

Want to become a frontend developer? Consider diving into some of my courses:

See you in the videos!

[igorkrup]

I love Breaking Bad and Narcos but these series are even better and more addictive ;)

[garywolff]

Max, again, a huge THANK YOU is in order for your excellent practical explanations and examples. Hope you are monetizing your efforts in a big way, as you are helping thousands of people like me do their jobs better and put food on our tables. Thanks for sharing.

[bliggode]

I recently tried to create some tutorials and ran into all the issues you normally run into when creating them. This let's me appreciate your videos even more. Thanks for the hard work.

[snugglepuff]

This really is as clear and understandable as I can imagine a Webpack tutorial being. Thanks again, Max!

[hovikantanisyan]

There is no better teacher then you in the whole galaxy. You explain so clearly, so easily, that impossible not to understand something.

[romimaximus]

I really like the way you explain and make things clear...how to use it and why to use it...you're a awesome teacher !!👍

[Geekstocks]

You know what I love about learning this way? I can "interrupt" you 50 times (aka: pause) as I flip between this video and my code, and you will never get upset! ;-) Thanks again, wonderful series!

[activeraj]

This video was awesome, so simplified and clear to shed light on webpack.

[katym]

This tutorial is so awesome. I was a bit confused on a practice project I'm doing with webpack so I decided to go back and do another tutorial. You're really great at breaking it down. Thank you so much!

[PauloVazquez]

Thank you very much Max for the entire webpack series and for all the courses on udemy that you create for us. I have learned a lot of things that I always believed too much difficult for me. I will keep studying with you!

[abelmescua]

Your videos are really good Maximilian, you give a very good introduction of how WebPack works. Thank you for sharing this with us!!

[mibreit-photo]

You do a really good job explaining Webpack. Finally I understand what I'm doing all the time in my configs ;-) Till now it was mostly copy and paste from different sources

[hellonehha]

Video is helpful I need one help I am using SASS and TS with webpack. When I put sass main file to main.ts webpack throw me error while compile as it is not able to recognize @

[sripaladamala]

I follow you now on youtube as well as udemy and I am glad to say that I have cleared angular2 interview with your udemy and youtube courses.

[priyeshjammula]

It's really precise and very clear. Thanks Maximilian!

[TheDaruma]

Hey Max, I've benefitted so much professionally and personally from all the videos you do. I've got all your courses on Udemy! Keep up the great work man.

[JonathanAhrensIsAwesome]

The starting minutes you dedicate to explain context are invaluable.

[lius]

One of the best videos I've seen on webpack.
Congratulations!

[vladb]

What about multiple entries with a couple of html files?
I've tried, but it doesn't work correct with dev server.

[yash]

UPDATE - March - 2019
Okay so I encountered some issues while trying to run the project with this configuration.. How I resolved this ->
I uninstalled babel-core and babel-preset-es2015 --> npm uninstall babel-core babel-preset-es2015

And now my first object in the rules array looks like this :
{
test : /\.js$/,
use : [
{
loader: 'babel-loader',
options: {
}
}
]
},
//changed the presets key above..
package.json -->
"devDependencies" : {
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"^4.0.0-beta.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}


and now my project is working fine <3