@types/file-loader

  • Version 5.0.0
  • Published
  • 10.5 kB
  • 1 dependency
  • MIT license

Install

npm i @types/file-loader
yarn add @types/file-loader
pnpm add @types/file-loader

Overview

TypeScript definitions for file-loader

Index

Variables

variable FileLoader

const FileLoader: any;

    Interfaces

    interface Options

    interface Options {}

      property context

      context?: string;
      • Specifies a custom file context.

        Example 1

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

      property emitFile

      emitFile?: boolean;
      • 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

      property esModule

      esModule?: boolean;
      • 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

      property name

      name?: string | ((file: string) => string);
      • 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]'

      property outputPath

      outputPath?: string | BuildResourcePathFn;
      • 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

      property postTransformPublicPath

      postTransformPublicPath?: (p: string) => string;
      • 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

      property publicPath

      publicPath?: string | BuildResourcePathFn;
      • 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}; }, }, }, ], }, };

      property regExp

      regExp?: RegExp;
      • 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

      Type Aliases

      type BuildResourcePathFn

      type BuildResourcePathFn = (
      url: string,
      resourcePath: string,
      context: string
      ) => string;
      • Parameter url

        Parameter resourcePath

        original absolute path to the asset

        Parameter context

        directory where assets are stored (rootContext), or the value of the context option if set.

        the path to use for the asset

      Package Files (1)

      Dependencies (1)

      Dev Dependencies (0)

      No dev dependencies.

      Peer Dependencies (0)

      No peer dependencies.

      Badge

      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/file-loader.

      • Markdown
        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/file-loader)
      • HTML
        <a href="https://www.jsdocs.io/package/@types/file-loader"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>