file-loader

file-loader is a webpack loader that resolves import/require() statements pointing at non-JavaScript files (images, fonts, and other static assets) into a public URL, while copying the referenced file into webpack’s output directory. It was one of the most widely used building blocks in webpack 4-era configurations for handling static asset imports before webpack 5 introduced built-in asset modules as a replacement.

The project’s own README now carries a deprecation notice pointing users toward webpack 5’s native asset modules, and the repository has seen no commits since March 2021. Despite that, it still sees roughly 10.7 million weekly npm downloads, reflecting the enormous number of existing webpack 4-style configs (and libraries built on them) that continue to depend on it transitively.

What You Get

• Automatic emission of imported files (images, fonts, etc.) into webpack’s output directory with a content-hashed or custom filename
• A name/outputPath/publicPath option set (each accepting a string template or a function) for controlling exactly where files land and what URL they resolve to
• A regExp option for extracting path segments via capture groups and reusing them in the output filename template
• An emitFile: false mode for returning a URL without actually writing the file, useful in server-side/isomorphic builds
• Both ES module and CommonJS output modes via the esModule option

Common Use Cases

• Importing images, fonts, or other static assets directly in application code within a legacy webpack 4 configuration
• Maintaining older webpack configs/libraries that predate webpack 5’s asset modules feature without a rewrite
• Controlling exact output filenames and public URLs for static assets via custom naming templates
• Disabling file emission (emitFile: false) to get a public URL without writing to disk in server-rendering setups

Under The Hood

Architecture — The loader’s logic lives in a small src/index.js entry point plus src/utils.js for filename-template interpolation and src/cjs.js for the CommonJS wrapper; it plugs into webpack’s loader pipeline by returning a JS module (ESM or CJS depending on the esModule option) that re-exports the computed public URL string, while separately registering the source file as a webpack-emitted asset.

Tech Stack — Plain JavaScript with two runtime dependencies (loader-utils for filename templating and schema-utils for options validation) and a peer dependency on webpack 4 or 5. Development tooling includes Babel, Husky, lint-staged, and commitlint, typical of the webpack-contrib org’s shared tooling conventions.

Code Quality — 18 test files cover the loader’s options surface (name templates, output/public path functions, regExp capture groups, emitFile toggling). However, the project has had zero commits since March 2021 and is explicitly marked deprecated in its own README in favor of webpack 5 asset modules — a rare case of a widely-used package being frozen not from abandonment but because its functionality was absorbed into the underlying tool it plugged into.

API Design — Every option accepts either a plain string template (with placeholders like [name], [hash], [path]) or a function for full programmatic control, giving simple cases a declarative one-liner while still supporting complex per-file logic (e.g. routing certain files to different output paths) without needing a second loader.