Webpack Loaders for CSS, SCSS, ES6, and JSHint - Ep. 3

In this video, I cover an array of webpack loaders that'll help optimize your code and allow you to make use of SASS and ES6.

Learn how to use webpack loaders to load and minify your CSS, compile your SASS, SCSS, and ES6 code; and lint your code with JSHint. Enjoy!

Git repo so you can follow along:

Timeline:
00:12 - Setting up our project for use of webpack loaders
00:48 - Adding a config file
01:56 - CSS setup
07:39 - SCSS setup
09:16 - ES6 setup
11:34 - Linting with JSHint
13:40 - Upcoming course

Resources I used to get started with webpack that you may find helpful too:

Beats:
Immortal Beats - Oh Wee - Creative Commons

Support Chris Courses Through Patreon:
--------------------------------------

Chris Courses Social:
---------------------

Christopher Lis Social:
-----------------------

[diahrongrismore]

Really like your video. The presentation, explanations and details were explained very professionally. Great job! I am certain others will feel the same once they view your video, if not already.

[jinlee]

Seriously.. AWESOME tutorial ! really appreciate your detailed input for explaining codes here and there. Really easy to follow !! Will continue to watch all your vid ! :D Cheers Christopher !

[stormosone]

Hey man great work you have a talent for teaching and explaining things in clear ways

[ZubnoyPast]

Section about loading scss was helpful for me, thanks!

[Hammster]

Great video, tbh even as a senior webpack is just a mess to understand. And your video is so far the only one that really goes through the process without me feeling like a 5yr old. Thank you ;)

[isunaslabs]

Thank u much.U made this whole thing looking so easy.Appreciate it

[kevinfrilot]

Awesome tutorials, thanks for helping me understand.  Are you down to share your Alfred workflow you used in the beginning?

[luisavila]

Great video thank you waiting for more videos

[jeffjgarrett]

At 4:15, "module" needs to be changed to "rules". Great video!

[Mardiantopersonal]

hi, how to use bootstrap js with gulp and webpack?

[dallinparker]

What's the alfred workflow you used to make that project so quick?

[khaledfares]

Why do we need babel and es2015 preset with webpack2 ? isn't that webpack2 transpiles es6 by default?

[Sjon_E]

Hey, me again.

I believe the new version of webpack made it so that you need to address '-loader' after both 'style' and '!css' in the config file because loaders are no longer allowed to omit them.

Here's the error a modern version of Webpack gets after doing it 100% the way you did yours.

===>
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style'.
<===

Solved with a little google, you need to change the config loader to 'loader: 'style-loader!css-loader''

I'm sure that this method will also change in a year and become obsolete as well. lol

[ImranWaheedEmranch]

can you provide the git version of this project?

[JohanGuse]

Make a video using pug and minify html from pug. :)

[erroid]

gj, ps. exclude /node_modules/ without $

[carver]

It's funny how complicated javascript developers make things just so they can feel like real programmers. "Look at me I have to run 11 commands in terminal just to update my css...I'm am a real programmer! Stop making fun of me guys!!!"