Hey! Don’t want to read all the in’s and outs of bending Webpack into shape? Jump to the final webpack configuration.
Sometimes Static Html Is Best
A Simple Static Site
We’ve built a small set of static HTML files and images to demonstrate how Webpack handles HTML and the images it references:
Processing Static HTML With Webpack
Webpack doesn’t know how to handle HTML files, but adding the
html-webpack-plugin lets Webpack parse HTML files and place them into the output directory. First we need to install dependencies with NPM:
With dependencies installed, we can configure the plugin in
webpack.config.js to include
index.html in Webpack’s output.
After this change, Webpack has dutifully included a single html file in the output directory along with an empty JS file:
Automatically Processing Many HTML Files
There is one HTML file in the output directory, but there are three more files missing. It would be tedious and error prone to update Webpack’s config every time files are added or removed. Instead of manually adding the other files, let’s modify the configuration to automatically include all HTML files it finds. It’s not immediately obvious how to accomplish this because a
HtmlWebpackPlugin instance only handles a single HTML file (It doesn’t support globbing).
Webpack now automatically finds all static html files and outputs them to the
Processing Images With Webpack
Webpack is automatically processing our HTML, but doesn’t do anything with the images referenced in
The Webpack config needs two additional module rules to get images working. The first rule parses HTML files using
html-loader which allows Webpack to look for image references. The second uses a Webpack 5 Asset Module to copy those images to the output directory:
Now all images referenced in the HTML are output to their own directory:
Images now display correctly and we can navigate between pages:
Optimizing Image File Size
Because Webpack is running images through its pipeline, we can do more than just copy them. Adding
image-webpack-loader to the existing image rule will reduce image file size on the fly. By default,
image-webpack-loader optimizes JPEG, PNG, SVG and GIF images. We’ve overridden the PNG options to get smaller files at the cost of a small reduction in quality:
After optimization, the output images are almost half the size of the originals:
Automatically Inlining Images
We can further optimize image loading by embedding small images directly in the HTML. Image inlining improves page load time by reducing the number of requests the browser makes. Webpack 5’s Asset Module comes with built-in support for automatic inlining of small assets. We can enable it by updating our image rule:
The smaller images are missing from the image output directory after this change. The only images left are too big to embed:
The missing images have been embedded directly into the HTML files:
TLDR: Final Webpack Configuration
Webpack is automatically parsing all our static HTML, optimizing referenced images, and inlining those images when it makes sense. Put together, the final Webpack configuration looks like this:
Our static HTML and image assets are now parsed and optimized by Webpack. Did the changes improve the performance of these pages? That’s what Request Metrics is for! Try it out for free to learn the real performance of your production website.