Explore essential concepts of Webpack asset management focused on handling fonts and media files, including configuration, loaders, file naming, and optimization strategies. This quiz is designed to help you reinforce your knowledge and avoid common pitfalls when bundling font and media assets in modern web projects.
When bundling fonts with Webpack, which loader is most appropriate to process font files like .woff and .ttf for output in your build directory?
Explanation: file-loader handles importing font files such as .woff or .ttf by copying them to the build directory and returning the path, which is ideal for managing font assets. style-loader and css-loader are used to inject CSS into the DOM or interpret CSS imports, but they don't handle font files directly. html-loader is primarily for processing HTML files and is not designed for managing fonts.
To ensure effective browser caching and cache busting for media assets in a Webpack build, what is the best practice for naming output files?
Explanation: Using a hash in the filename ensures that each build has unique filenames when assets change, allowing browsers to cache files efficiently and fetch new versions when needed. Keeping original filenames does not help with cache busting. Naming all files as style.css or using a numeric sequence can result in overwriting files and cache issues.
When using Webpack, how should you reference an image asset inside a CSS file so it is processed correctly during the build?
Explanation: Using url('./images/photo.png') is the correct CSS syntax that Webpack’s loaders can process, resolving and copying the asset to the appropriate output location. src='image:...' is not valid in CSS, require() is JavaScript syntax, and asset() is not a standard function or CSS property. Only url() will be correctly detected and replaced.
Which Webpack loader allows you to inline small media files as data URLs but store larger files separately, reducing HTTP requests for small assets?
Explanation: url-loader converts small files into base64-encoded data URLs embedded directly in the bundle, minimizing HTTP requests, and falls back to file-loader behavior for larger files. raw-loader imports file contents as a string, not suitable for media. mini-loader and json-loader do not handle file inlining or media optimization for this purpose.
What configuration technique helps prevent font and media files from being bundled inside your main JavaScript bundle, keeping them as separate output assets?
Explanation: Specifying asset/resource type (or using file-loader in older setups) tells Webpack to emit font and media files as separate files, not to inline them into JavaScript bundles. Inline scripts are for JavaScript, not assets. Simply placing files in the src folder or disabling loaders does not control how files are bundled or emitted.