Webpack Loaders Basics: CSS, Images, and Files Quiz Quiz

Explore core concepts of webpack loaders for managing CSS, image, and file assets in bundling workflows. This quiz helps you deepen your understanding of loader configuration and asset integration strategies in modern web development.

1. Identifying the Correct Loader for CSS

   Which loader is primarily responsible for injecting CSS styles into the DOM when bundling stylesheets using webpack?

   1. img-loader
   2. stylus-loader
   3. style-loader
   4. file-loader

   Explanation: The correct answer is style-loader, which adds CSS to the DOM by injecting a u003Cstyleu003E tag. img-loader handles image optimization, not CSS. file-loader is for emitting files, such as images or fonts, into the output directory. stylus-loader is used for compiling Stylus preprocessor files to CSS, not for injecting styles into the DOM.

2. Processing Image Assets in Webpack

   When bundling image assets like PNG or JPEG files, which webpack loader is commonly used to copy these files to the output directory and update references in your code?

   1. json-loader
   2. file-loader
   3. css-loader
   4. image-loader

   Explanation: file-loader is used to handle image files by copying them to the output directory and returning the URLs that can be used in your code. css-loader is for interpreting CSS files and resolving imports or url() paths, not actual image files. json-loader processes JSON files. 'image-loader' is not a standard loader and does not perform this specific function.

3. Enabling Import of CSS Files in JavaScript

   If you want to allow your JavaScript files to import CSS files using the import statement, which webpack loader must be included in the configuration?

   1. svg-loader
   2. css-loader
   3. babel-loader
   4. raw-loader

   Explanation: css-loader is needed to enable JavaScript files to import CSS files by resolving @import and url() statements. raw-loader loads files as raw text, which isn’t suitable for CSS integration. svg-loader is specialized for SVG files, not general CSS. babel-loader is designed for handling JavaScript code transformation, not CSS importing.

4. Scenario: Serving Font Files in Webpack Build

   You need to ensure that font files such as WOFF are copied to the final build directory and that their URLs are correctly handled in CSS. Which loader best fits this scenario?

   1. css-loader
   2. font-loader
   3. file-loader
   4. url-loader

   Explanation: file-loader is the standard way to handle font files by copying them to the output and providing correct URLs. 'font-loader' is not a typical loader for this scenario. url-loader can also be used but mainly to inline files as data URIs when they are small, not to emit them as separate files. css-loader is involved in processing CSS, but not in copying font files or handling their URLs directly.

5. Optimizing Small Image Assets

   Which webpack loader can inline small image files as base64-encoded data URLs within your bundles instead of emitting separate files?

   1. ts-loader
   2. url-loader
   3. html-loader
   4. css-loader

   Explanation: url-loader can inline small image assets as data URLs, helping reduce HTTP requests. css-loader does not handle inlining images, only resolves URL references in styles. html-loader processes HTML files and assets referenced within them. ts-loader is used for TypeScript files, which is unrelated to asset inlining.