You’ve probably used Webpack to bundle JavaScript, but what about images, fonts, and other static assets? In this article, we’ll explore how Webpack can manage those assets in a practical — and surprisingly elegant — way.
Why does this matter?
Imagine you’re building an app full of images, icons, custom fonts, and PDFs. Without an organized strategy, your project can become messy. Webpack lets you import assets directly into your code, and it takes care of everything: renaming, compressing, placing files correctly, and more.
Prerequisites
- Node.js installed
- Webpack and Webpack CLI
- Basic JavaScript knowledge
npm install --save-dev webpack webpack-cli
1. Importing images directly in JavaScript
Webpack lets you import images like JS modules:
import logo from './images/logo.png';
const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);
Webpack copies the image to the build folder and updates the path automatically.
2. Asset Modules
Since Webpack 5, there’s no need for file-loader or url-loader. Use asset/resource, asset/inline, and asset:
{
test: /\.(png|jpg|gif)$/i,
type: 'asset/resource',
}
3. Fonts and SVGs
You can import fonts like this:
import './fonts/roboto.woff2';
And inline SVGs:
{
test: /\.svg$/,
type: 'asset/inline',
}
4. PDFs and large files
For files meant to be downloaded rather than displayed:
{
test: /\.pdf$/,
type: 'asset/resource'
}
5. Hashed filenames
For better cache management:
output: {
filename: '[name].[contenthash].js',
assetModuleFilename: 'assets/[hash][ext][query]'
}
Final thoughts
Webpack is more than a JS bundler. Using asset management wisely can make your project more organized, efficient, and professional. Start small — maybe with your logo — and gradually unlock the full power of this amazing tool.
Found this useful? Hit the ❤️ or leave a comment!
Werliton Silva | Sciencx (2025-05-29T14:59:00+00:00) You Think You Know How Imports Work? Let’s Talk Files, Images, and Fonts. Retrieved from https://www.scien.cx/2025/05/29/you-think-you-know-how-imports-work-lets-talk-files-images-and-fonts/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.