Welcome to Part 4 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 5th module from Joe’s course: Adding Images & Fonts to Your Build. These are quite simple to add using the same loader for both types of files.

Adding Images to your Build

Joe demonstrates this with the url-loader beginning with how to install it.

Images are referenced from HTML, and we see these change in our index.html, which point to the CSS class .bg_header_img

Next Joe explains the CSS changes, the most important one being the rule for our new .bg_header_img class.

For demonstration purposes we use the webpack logo

Next we must update the loaders section in our webpack.config.js, adding a reference to the url-loader. We see that we can use ? to set parameters, and Joe uses this to set a size limit of 100,000. Any image bigger than this will be treated as a separate request, rather than an inlined image.

Joe also demonstrates how to manipulate add another image into the DOM using JavaScript. He creates an image element, sized to 25% height and width, and for the source he uses the CommonJS require function again. Finally, he uses appendChild to add the image into the DOM.

Great! We see this image displaying twice, once in the image tag itself, and once as the background. Joe shows us that the image sized at 25% is base64 encoded data, inlined in the html file. The image itself is inside our bundle.js file.

Joe explains that the 100,000 limit is actually too big, so reduces that is 10,000 and shows these are now requests for actual png files.

Adding Fonts to your Build

Joe begins by explaining the differences to the project made since the previous clip. The config change is very simple: just add the ttf and eot extensions to the url-loader configuration.

Joe explains that font work to exactly the same rules as images, including the limit rule.

Continue to Part5 – Webpack Tools