Joe Eames is your Webpack teacher

Welcome to Part 3 of this review of the Pluralsight course Webpack Fundamentals by Joe Eames.

Joe has worked both full and part time as a technical teacher for over ten years.

He is a frequent blogger and speaker, organizer of ng-conf, the AngularJS conference, and a panelist on the JavaScript Jabber podcast

Also in this series:

Part 1 – Introduction and Basic Builds

Part 2 – Advanced Builds

Part3 – Adding CSS to your Build

Part4 – Adding Images and Fonts to your Build

Part 5 – Webpack Tools

Part 6 – Webpack and Front End Frameworks

In this episode we are reviewing the 4th module from Joe’s course:

Adding CSS to your Build

CSS and Style Loaders

This module begins with the two basic CSS loaders in webpack, which Joe installs using NPM.

In the webpack.config.js, Joe specifies both of these loaders using the ! character to chain them together.

We also need to tell webpack about the CSS files that we want to use. Joe shows us that we can use the require function to specify each CSS file. Make sure that you are specifying them in the order that you need.

Internal Implementation of CSS and Style Loaders

Joe shows us that no CSS files are being loaded. Yet we can see that the style displayed correctly on the page, begging the question “how did these styles get there?”

We see that there are style elements in the DOM that match the contents of the specified CSS files.

We also see that these are minified in our production build.

Using SCSS and SASS

Here we learn how to use SASS with webpack.

If you aren’t at all familiar with SASS, you have a few options:

You can check out the Using SASS module of Shawn Wildermuth’s “A Better CSS: LESS and SASS”

or see Jason Roberts “Simplifying CSS in Visual Studio With Sass”

or see Gary Simon’s “Speeding up Your CSS Workflow with Sass and Compass”

In this clip we see that it is just a matter to entering the right configuration into our webpack.config file, and that webpack can process a mixture of CSS and SCSS files no problem.

Using LESS

No major surprises here. The loader is called less-loader, and we use this instead of our SASS loader.

Creating a separate CSS bundle

Earlier we saw the CSS embedded into the head of out HTML. But what if you want to output it as a CSS bundle? Webpack can handle this as well, with the aid of the extract-text-webpack-plugin.

In our config file, Joe requires this plugin, and adds a plugins section to the main configuration object which instantiates our ExtractTextPlugin.

We this plugin available in memory, we can call the extract function in our loaders section. This function takes two parameters: style-loader, and css-loader.

Joe also shows how to use this for our LESS loader.

We must also remember to add a link to our CSS file. We’re using new technology, but we must forget that it’s ultimately all just HTML, CSS and JavaScript, and hence needs to be programmed in the usual way here.

Auto-Prefixer

If you’ve seen Christopher Schmitt’s Introduction to HTML5 and CSS3 course, you’ll be well aware that there are a LOT of vendor prefixes. Knowing which rules need prefixes and which one prefixes those should be is one hassle that most don’t need.

Fortunately Pascal Hartig realized this and decided to make life easier for us by creating the autoprefixer-loader.

Since this course was recorded the autoprefixer-loader was moved into the PostCSS project.

Review

Unit Testing is not covered in this course, but it is an important topic. I have found that importing CSS makes it harder to unit test your code, so I’ll briefly discuss this.

A common problem is the one described by this StackOverflow question: mocha testing failed due to CSS in webpack

I have found Johannes Ewald’s rewire to be a great tool to solve this. However the next problem I ran into was “ReferenceError: document is not defined”.

If you are running your tests using Node JS then it will not have the same objects available that are available within your browser.

Fortunately there is another course that can help: see the Environment Setup module of Cory House’s course “Building Applications with React and Redux in ES6”. This course uses Webpack and even if you do not use React you should find some useful information here.

You can grab the code from github. We also see that this setup is a simpler solution than using rewire to avoid loading CSS when running our tests.

Continue to Part 4 – Adding Images and Fonts to Your Build