@types/file-loader

Specifies a custom file context.

Example 1

module.exports = { module: { rules: [ { test: /.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { context: 'project', }, }, ], }, ], }, };

If true, emits a file (writes a file to the filesystem); otherwise, the loader will return a public URI but will not emit the file. It is often useful to disable this option for server-side packages.

true

By default, file-loader generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking. true

Specifies a custom filename template for the target file(s) using the query parameter name.

By default the path and name you specify will output the file in that same directory, and will also use the same URI path to access the file.

For example, to emit a file from your context directory into the output directory retaining the full directory structure, you might use:

Example 1

module.exports = { module: { rules: [ { test: /.(png|jpe?g|gif)$/i, loader: 'file-loader', options: { name: '[path][name].[ext]', }, }, ], }, };

Example 2

module.exports = { module: { rules: [ { test: /.(png|jpe?g|gif)$/i, loader: 'file-loader', options: { name(file) { if (process.env.NODE_ENV === 'development') { return '[path][name].[ext]'; }

return '[contenthash].[ext]'; }, }, }, ], }, };

'[contenthash].[ext]'

Specify a filesystem path where the target file(s) will be placed.

Function gets passes the original absolute path to the asset, as well as the directory where assets are stored.

Example 1

module.exports = { module: { rules: [ { test: /.(png|jpe?g|gif)$/i, loader: 'file-loader', options: { outputPath: (url, resourcePath, context) => { if (/my-custom-image.png/.test(resourcePath)) { return other_output_path/${url}; }

if (/images/.test(context)) { return image_output_path/${url}; }

return output_path/${url}; }, }, }, ], }, };

undefined

Specifies a custom function to post-process the generated public path.

This can be used to prepend or append dynamic global variables that are only available at runtime, like __webpack_public_path__. This would not be possible with just publicPath, since it stringifies the values.

Example 1

module.exports = { module: { rules: [ { test: /.(png|jpg|gif)$/i, loader: 'file-loader', options: { publicPath: '/some/path/', postTransformPublicPath: (p) => __webpack_public_path__ + ${p}, }, }, ], }, };

undefined

Specifies a custom public path for the target file(s).

Function gets passes the original absolute path to the asset, as well as the directory where assets are stored.

Example 1

module.exports = { module: { rules: [ { test: /.(png|jpe?g|gif)$/i, loader: 'file-loader', options: { publicPath: (url, resourcePath, context) => { if (/my-custom-image.png/.test(resourcePath)) { return other_public_path/${url}; }

if (/images/.test(context)) { return image_output_path/${url}; }

return public_path/${url}; }, }, }, ], }, };

Specifies a Regular Expression to one or many parts of the target file path. The capture groups can be reused in the name property using [N] .

If [0] is used, it will be replaced by the entire tested string, whereas [1] will contain the first capturing parenthesis of your regex and so on...

Example 1

// file.js import img from './customer01/file.png';

// webpack.config.js module.exports = { module: { rules: [ { test: /.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { regExp: //([a-z0-9]+)/[a-z0-9]+.png$/i, name: '[1]-[name].[ext]', }, }, ], }, ], }, };

undefined