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


What’s up everybody, welcome back, in this
video we’re going to jump right into using Webpack to minify our css, compile SASS and
ES6 code, and for linting purposes. So let’s begin. Alright, so first thing I’m going to do
is create a blank project. Essentially this will be a directory that
contains an index.html file with some default markup, and a blank app.js file. And if we view this in the browser, you’ll
see our HTML file being read. So, let’s say we want to import some CSS
into our index.html file. As you see, we have some beautiful h1 text
here, but we want to make it even more beautiful, therefore, we’re going to need some CSS. But, before we do anything, let’s add a
webpack config file… Create a new file via sublime text, finder,
or your terminal. And call it webpack.config.js… Once you have this config file created, insert
a module object with an exports property so that we can ensure webpack is able read our
configuration, and then set it to an empty object, and then save it… Now, recall in the last course, in order for
Webpack to work off the config file, we need to specify an entry point… and we’ll call
this app.js… and then finally we need an output point… Now the output property takes an object as
its value, so we have to create an empty object… And once we have an empty object, we can add
the output property called “filename” and give this filename property a value of
“build.js”, and this is the spot we want app.js to be compiled to. Finally, let’s add a watch property to this…
and then we’re going to set this watch property to true. Now if we type Webpack into our terminal,
Webpack will watch for changes within app.js, and output those changes into build.js. So, back to importing CSS to make our hello
world text prettier. Typically, in order to add CSS to our site,
we’d add a link tag within the head of our HTML file, and reference a stylesheet from
there. So let’s start off with this and make our
background red. Create a style.css file within your project
directory… select the body tag within your css file… and then give it a background
of red… Save the file, and then view it in the browser. So as you can see, we’ve successfully changed
our background color to red. And this way of implementing CSS is just fine,
using the link tag is okay right now, and that’s just because we have so little code
within our style.css. But once you start adding a lot of css, your
file size will begin to grow correspondingly. And as a result, it’s nice to minify your
css in order to ensure our file is as small as possible, while still giving the browser
something it can understand. So let’s add a little more code to our style.css
file and give our h1 tag a sans-serif font for the time being. Now, in order to minify our css with webpack,
we’re going to do something a little different than importing a stylesheet directly within
our HTML… We’re actually going to delete this link
to our stylesheet, and we’re going to ‘require’ our css within our app.js file… But, a quick disclaimer, before we do this:
Webpack can only handle javascript out of the box, it can’t do anything with CSS until
we download some external packages. So we need to download two external modules:
1. A css-loader module and 2. A style-loader module… So let’s cancel our webpack watch for the
time being, and let’s type in the following to install our modules… `npm install css-loader style-loader`… And run it… and that should install both
the css-loader and style-loader modules for us. Now, the concept of a loader can be a little
hard to understand at first, but you can think of it as an add-on for webpack. We can plug it in to webpack and it’ll take
care of specific tasks for us automatically. In this instance, we downloaded a css and
style loader which will allow us to require and minify css files using webpack… So, now that we have our loaders downloaded,
let’s go ahead and plug them into webpack. In order to do this, we’re going to head
on over to our config file, and we’re going to add a property called module… Assign an empty object to this property, and
then we’ll add another property within it called “loaders”… and then for this
one we’re going to assign it an empty array… So this loaders property takes an array of
objects, and each object will represent an add-on we’d like to plugin to webpack. So first thing we need to do is specify which
files we’d like this add-on to run through. We wouldn’t want our css loader running
through our JavaScript files because that’s not what it was built for, we need to specify
that we only want our css loader to run on our css files… So in order to do this, we’re going to tell
webpack that it should test for a specific file type by adding a “test” property,
and the value for this is going to be a regular expression… So in order to write a regular expression
for .css, we start off with a forward slash, which serves as the start point for the term
we’d like to find. Next, we’re going to add a backslash, a
period, and then the filetype we’d like to search for, so CSS. Normally, a period without a backslash refers
to a pattern that searches for all characters, rather than searching for a literal period. This backslash is used for escaping, we’re
telling Webpack to search for a file that contains a literal period followed by the
string css… Finally, we can end our regular expression
by adding a dollar sign and another forward slash. So now that webpack is testing for all css
files within our project directory, we can now tell it what loaders we want ran on those
files. So since we want to make use of our style
and css loaders, we’re going to indicate that by adding the property loader…. And giving it a value of what loaders we want
ran on our css file. So we’re going to give it a value of “style!css”. So the exclamation mark may look a little
foreign to you, but all it means is that first, we’re running our files through the css
loader, and this is so webpack can process our CSS, and then immediately running it through
a style loader so Webpack can apply the necessary styles to our HTML where needed. And one quick thing to keep in mind is that
when chaining loaders like this, they are always applied from right to left, swapping
the order will cause things to break, so be aware, if your loaders aren’t working as
expected, they may be in the incorrect order. Alrighty, so let’s save our config file
and run Webpack in order to ensure everything is working as expected… Looks like we’re good to go, so let’s
head on over to our app.js file and import our css. To import our css, it’s really quite simple. All we’re going to need to do is use require
and insert the name of the file we want Webpack to use (‘./style.css’). So now if we refresh our browser, you’ll
see that we have our css being loaded once again.. And if we inspect our page… and open up
the head tag, you’ll see that our styles aren’t being linked in via a link tag, they’re
being inlined, which is typically good for page speed. So, you’ll notice, although our styles are
being pulled in, they’re not being minified like we wanted them to be. Well in order to do this, we need to add the
-p option similar to like we did when we were minifying our JavaScript. So if we add this into terminal, `webpack
-p`, run that, and refresh the page once it’s done compiling. You’ll see that all of our CSS is now compressed
and all of our white space has been removed. So really awesome stuff. Now what if we wanted to use SCSS over CSS? In order to do this, we’ll need to plug
another loader into webpack. So if we type in webpack sass into Google,
and click the first result… We are greeted with a SASS Webpack loader,
and this is a loader that’ll be used to compile our SCSS or SASS into something the
browser can understand. So let’s scroll down a bit… copy the install
string… and paste it into your terminal… and run that. So once it’s installed, let’s head back
over to our Webpack config file. Adding this loader is quite simple, rather
than testing for css files, we’re going to test for scss files instead… So we’re going to change that here. Then we’re going to chain one loader in
front of our style and css loaders, and this one is going to be a sass loader… So let’s change the extension of our css
file to scss… and then we’re going to require an scss file within app.js… and
then we’re going to run webpack… and if webpack runs successfully, you should now
be able to make use of SASS and all of it’s features throughout your code. And we can test this real quick by nesting
our h1 within our body tag…… And you’ll see that webpack is still compiling
our file while the browser is still understanding what we present to it. So a really easy setup in regards to adding
SASS to our project. Now, we have our CSS optimized and ready to
go, but what if we want to enhance our JavaScript by making use of ES6 code? Well, lucky for us, there’s a Webpack loader
for that as well. In order to set up Webpack to make use of
ES6 code, first off, we need an ES6 compiler. The most popular one is called Babel, so simply
search Webpack Babel… and click the first result… We’re going to scroll down a bit, and we’re
gonna come across another installation string. So copy it… And paste it into your terminal. So once that’s done installing, let’s
head back to our webpack config file, and since ES6 is a version of JavaScript, we want
to have Webpack run our ES6 compiler on our JavaScript files rather than our css files
or something else. So we’ll need to add a new loader object
to our loader array… And set it to test for all files with the
extension `.js`…. The loader we want to run our JS files through
is called Babel, so we’ll specify that now….. And then we’re going to do something new,
we’re going to add a property called exclude, and specify that we don’t want this loader
to be run on any JS files within our node_modules directory since we’re not editing them directly. And then finally, we add a property called
query, which takes an object as it’s value… And within query, we add a property called
presets… and we’re gonna set this property to an array that contains the string ‘es2015’….. So think of the query property as an options
property. All we’re saying here is that we want Webpack
to compile our code into ES2015 format, which is something that all modern browsers can
understand. So with this in place, we can save the config
file… run webpack. And if everything is good to go… we should
now be able to use ES6 code within our JS files. So let’s test this out now. I’m going to head on over to app.js, and
I’m going to declare what’s known as a constant. And a constant is currently only available
within ES6. So next up, I’m going to console log this
out in order to ensure that the browser can understand this constant that we declared. And if I go to the browser, refresh the page,
you’ll see that it does indeed understand the constant statement. Alright, so our configuration is looking pretty
damn sweet so far, but let’s cover one more thing: linting. If you’re unfamiliar with it, the term linting
basically means analyzing your code for errors. And as it turns out, computers are a lot better
at spotting things that’ll break our code such as missing semicolons, apostrophes, or
commas, than us humans are. So it’s very useful to have linting programs
to check these errors automatically whenever a file is saved. So let’s make use of the JavaScript linter
called JSHint, and to install this, we’re going to head on over to terminal like before,
and we’re gonna type in `npm install jshint-loader jshint`. And to make use of this loader, rather than
to pipe it onto the end of our JS loader, we need to create a whole new type of module
called a preLoader. And if you guessed it, preLoaders are simply
loaders than are run before all other loaders are called upon. So type in webpack jshint into Google….. Click the first result… and scroll down
until you get to the usage section right here. You already know how the test, exclude, and
loader properties work, so all we need to do is copy this chunk of code… paste it
before our loaders property in our config file… and make sure you add a comma to the
end of your array. So with this in place, we should now be able
to run webpack. And you’ll see we’re returned with a warning
message, meaning jshint is doing its duties and checking for code errors. So if I were to add some random semicolons
throughout my app.js file… and save the file… you’ll see that jshint has picked
up on this, and it’s letting us know the issue that it found. This’ll be very handy down the road, I can’t
tell you how many times I’ve missed a semicolon by accident, and I had no idea why my code
was broken, and it just ended up being a simple thing such as that. So all in all, with the addition of loaders,
we can add functionality onto Webpack very easily, making it an awesome tool for optimizing
your code, allowing for use of next level languages such as SASS and ES6, and for preventing
errors with linting. Alright everyone, so this pretty much clears
up our course on Webpack. In the next video I’m going to do something
a little different. I’m going to take you step by step in regards
to how to create a real world product from scratch. And the first thing we’re going to develop
is, we’re gonna develop a newsletter signup form using node.js and we’re also going
to integrate this with the MailChimp API. So we got some pretty cool stuff going on
in the backend. And front end wise, we’re going to make
use of the Green Sock Animation Platform to make this a newsletter sign up form no one’s
ever seen before. And I don’t really want to spoil too much
guys, so if you’re interested in this, definitely head on to the next video and I’ll take
you from there, but in the meantime, I hope you guys have a really great day, and I’ll
see you then.

25 Comments

Add a Comment

Your email address will not be published. Required fields are marked *