{"id":20029,"library":"file-loader","title":"file-loader","description":"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.","status":"maintenance","version":"6.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/file-loader","tags":["javascript","webpack"],"install":[{"cmd":"npm install file-loader","lang":"bash","label":"npm"},{"cmd":"yarn add file-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add file-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, required to operate as a loader","package":"webpack","optional":false}],"imports":[{"note":"file-loader returns the default export as the URL string.","wrong":"import { img } from './file.png';","symbol":"default","correct":"import img from './file.png';"},{"note":"CommonJS usage returns the URL via module.exports.","wrong":"const { img } = require('./file.png');","symbol":"require","correct":"const img = require('./file.png');"},{"note":"use property can be a string or array; Objects with loader/options are also valid.","wrong":"module.exports = { module: { rules: [ { test: /\\.png$/, use: 'file-loader' } ] } };","symbol":"webpack config","correct":"module.exports = { module: { rules: [ { test: /\\.png$/, loader: 'file-loader' } ] } };"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g|gif)$/i,\n        loader: 'file-loader',\n        options: {\n          name: '[name].[contenthash].[ext]',\n          outputPath: 'images'\n        }\n      }\n    ]\n  }\n};\n\n// In your source file\nimport image from './my-image.png';\nconsole.log(image); // Output: /images/my-image.abc123.png","lang":"javascript","description":"Shows basic webpack config and usage of file-loader with custom naming and output path."},"warnings":[{"fix":"Upgrade to Node >=10.13.0 or stay on v4.x","message":"Minimum node version increased to 10.13.0 in v5.0.0","severity":"breaking","affected_versions":"<5.0.0"},{"fix":"Set esModule: false in options if CommonJS required","message":"esModule option defaults to true in v5.0.0, outputting ES modules instead of CommonJS","severity":"breaking","affected_versions":"<5.0.0"},{"fix":"Use esModule instead of esModules","message":"esModules option renamed to esModule in v5.0.0","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Explicitly set hashFunction option to 'md5' if md5 needed","message":"Default hash algorithm changed to md4 in v6.0.0. Older webpack configs relying on md5 may break consistency.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Use path.relative(context, resourcePath) to get relative path","message":"When using outputPath with a function, the resourcePath is absolute. Relative path must be computed manually.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add a rule for the file extension, e.g., { test: /\\.png$/, loader: 'file-loader' }","cause":"Missing or misconfigured file-loader rule for the file type.","error":"Module parse failed: Unexpected token (1:0). You may need an appropriate loader to handle this file type."},{"fix":"Run npm install file-loader --save-dev","cause":"file-loader not installed.","error":"Error: Cannot find module 'file-loader'"},{"fix":"Use outputPath string or ensure webpack version compatibility","cause":"Using outputPath as function without webpack 5 fallback.","error":"TypeError: Cannot read property 'context' of undefined"},{"fix":"Check options names (name, outputPath, publicPath, etc.) against documentation","cause":"Misconfigured loader options, e.g., misspelled option name.","error":"Unhandled rejection in promise: Error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}