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.
Also in this series:
Part 1 – Introduction and Basic Builds
Part3 – Adding CSS to your Build
Part4 – Adding Images and Fonts to your Build
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.
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