file-loader

library6.2.0jsnpmunverified

Resolves import/require on a file into a URL and emits the file into the output directory. Stable version 6.2.0 (last release Oct 2020, maintenance mode) with webpack 4/5 support. Key differentiator from alternatives (e.g., url-loader, webpack asset modules) is explicit file emission with custom naming, output path, and public path configuration. Supports hashing, ES modules, and sourceFilename.

devops

github ↗package ↗

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

file-loader returns the default export as the URL string.

import img from './file.png';

CommonJS usage returns the URL via module.exports.

const img = require('./file.png');

use property can be a string or array; Objects with loader/options are also valid.

module.exports = { module: { rules: [ { test: /\.png$/, loader: 'file-loader' } ] } };

Shows basic webpack config and usage of file-loader with custom naming and output path.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, loader: 'file-loader', options: { name: '[name].[contenthash].[ext]', outputPath: 'images' } } ] } }; // In your source file import image from './my-image.png'; console.log(image); // Output: /images/my-image.abc123.png

Debug

Known footguns

breakingMinimum node version increased to 10.13.0 in v5.0.0

breakingesModule option defaults to true in v5.0.0, outputting ES modules instead of CommonJS

deprecatedesModules option renamed to esModule in v5.0.0

breakingDefault hash algorithm changed to md4 in v6.0.0. Older webpack configs relying on md5 may break consistency.

gotchaWhen using outputPath with a function, the resourcePath is absolute. Relative path must be computed manually.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

9 hits · last 30 days

gptbot

ahrefsbot

script

Resources

githubhttps://github.com/webpack-contrib/file-loader ↗

packagehttps://www.npmjs.com/package/file-loader ↗