• This repository has been archived on 17/Mar/2021
  • Stars
    star
    1,861
  • Rank 24,846 (Top 0.5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 12 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

File Loader

npm node deps tests coverage chat size

file-loader

DEPRECATED for v5: please consider migrating to asset modules.

The file-loader resolves import/require() on a file into a url and emits the file into the output directory.

Getting Started

To begin, you'll need to install file-loader:

$ npm install file-loader --save-dev

Import (or require) the target file(s) in one of the bundle's files:

file.js

import img from './file.png';

Then add the loader to your webpack config. For example:

webpack.config.js

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

And run webpack via your preferred method. This will emit file.png as a file in the output directory (with the specified naming convention, if options are specified to do so) and returns the public URI of the file.

ℹ️ By default the filename of the resulting file is the hash of the file's contents with the original extension of the required resource.

Options

name

Type: String|Function Default: '[contenthash].[ext]'

Specifies a custom filename template for the target file(s) using the query parameter name. For example, to emit a file from your context directory into the output directory retaining the full directory structure, you might use:

String

webpack.config.js

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

Function

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name(resourcePath, resourceQuery) {
            // `resourcePath` - `/absolute/path/to/file.js`
            // `resourceQuery` - `?foo=bar`

            if (process.env.NODE_ENV === 'development') {
              return '[path][name].[ext]';
            }

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

ℹ️ 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.

outputPath

Type: String|Function Default: undefined

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

String

webpack.config.js

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

Function

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          outputPath: (url, resourcePath, context) => {
            // `resourcePath` is original absolute path to asset
            // `context` is directory where stored asset (`rootContext`) or `context` option

            // To get relative path you can use
            // const relativePath = path.relative(context, resourcePath);

            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}`;
          },
        },
      },
    ],
  },
};

publicPath

Type: String|Function Default: __webpack_public_path__+outputPath

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

String

webpack.config.js

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

Function

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: (url, resourcePath, context) => {
            // `resourcePath` is original absolute path to asset
            // `context` is directory where stored asset (`rootContext`) or `context` option

            // To get relative path you can use
            // const relativePath = path.relative(context, resourcePath);

            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}`;
          },
        },
      },
    ],
  },
};

postTransformPublicPath

Type: Function Default: 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.

webpack.config.js

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

context

Type: String Default: context

Specifies a custom file context.

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

emitFile

Type: Boolean Default: true

If true, emits a file (writes a file to the filesystem). If false, 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.

file.js

// bundle file
import img from './file.png';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              emitFile: false,
            },
          },
        ],
      },
    ],
  },
};

regExp

Type: RegExp Default: undefined

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] placeholder.

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]',
            },
          },
        ],
      },
    ],
  },
};

ℹ️ 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...

esModule

Type: Boolean Default: 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.

You can enable a CommonJS module syntax using:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
            },
          },
        ],
      },
    ],
  },
};

Placeholders

Full information about placeholders you can find here.

[ext]

Type: String Default: file.extname

The file extension of the target file/resource.

[name]

Type: String Default: file.basename

The basename of the file/resource.

[path]

Type: String Default: file.directory

The path of the resource relative to the webpack/config context.

[folder]

Type: String Default: file.folder

The folder of the resource is in.

[query]

Type: String Default: file.query

The query of the resource, i.e. ?foo=bar.

[emoji]

Type: String Default: undefined

A random emoji representation of content.

[emoji:<length>]

Type: String Default: undefined

Same as above, but with a customizable number of emojis

[hash]

Type: String Default: md4

Specifies the hash method to use for hashing the file content.

[contenthash]

Type: String Default: md4

Specifies the hash method to use for hashing the file content.

[<hashType>:hash:<digestType>:<length>]

Type: String

The hash of options.content (Buffer) (by default it's the hex digest of the hash).

digestType

Type: String Default: 'hex'

The digest that the hash function should use. Valid values include: base26, base32, base36, base49, base52, base58, base62, base64, and hex.

hashType

Type: String Default: 'md4'

The type of hash that the hash function should use. Valid values include: md4, md5, sha1, sha256, and sha512.

length

Type: Number Default: undefined

Users may also specify a length for the computed hash.

[N]

Type: String Default: undefined

The n-th match obtained from matching the current file name against the regExp.

Examples

Names

The following examples show how one might use file-loader and what the result would be.

file.js

import png from './image.png';

webpack.config.js

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

Result:

# result
dirname/0dcbbaa701328ae351f.png

file.js

import png from './image.png';

webpack.config.js

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

Result:

# result
gdyb21L.png

file.js

import png from './path/to/file.png';

webpack.config.js

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

Result:

# result
path/to/file.png?e43b20c069c4a01867c31e98cbce33c9

CDN

The following examples show how to use file-loader for CDN uses query params.

file.js

import png from './directory/image.png?width=300&height=300';

webpack.config.js

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext][query]',
            },
          },
        ],
      },
    ],
  },
};

Result:

# result
https://cdn.example.com/directory/image.png?width=300&height=300

Dynamic public path depending on environment variable at run time

An application might want to configure different CDN hosts depending on an environment variable that is only available when running the application. This can be an advantage, as only one build of the application is necessary, which behaves differently depending on environment variables of the deployment environment. Since file-loader is applied when compiling the application, and not when running it, the environment variable cannot be used in the file-loader configuration. A way around this is setting the __webpack_public_path__ to the desired CDN host depending on the environment variable at the entrypoint of the application. The option postTransformPublicPath can be used to configure a custom path depending on a variable like __webpack_public_path__.

main.js

const assetPrefixForNamespace = (namespace) => {
  switch (namespace) {
    case 'prod':
      return 'https://cache.myserver.net/web';
    case 'uat':
      return 'https://cache-uat.myserver.net/web';
    case 'st':
      return 'https://cache-st.myserver.net/web';
    case 'dev':
      return 'https://cache-dev.myserver.net/web';
    default:
      return '';
  }
};
const namespace = process.env.NAMESPACE;

__webpack_public_path__ = `${assetPrefixForNamespace(namespace)}/`;

file.js

import png from './image.png';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[contenthash].[ext]',
          outputPath: 'static/assets/',
          publicPath: 'static/assets/',
          postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
        },
      },
    ],
  },
};

Result when run with NAMESPACE=prod env variable:

# result
https://cache.myserver.net/web/static/assets/image.somehash.png

Result when run with NAMESPACE=dev env variable:

# result
https://cache-dev.myserver.net/web/static/assets/image.somehash.png

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT

More Repositories

1

webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
JavaScript
12,555
star
2

mini-css-extract-plugin

Lightweight CSS extraction plugin
JavaScript
4,654
star
3

awesome-webpack

A curated list of awesome Webpack resources, libraries and tools
HTML
4,588
star
4

css-loader

CSS Loader
JavaScript
4,300
star
5

extract-text-webpack-plugin

[DEPRECATED] Please use https://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file
JavaScript
4,014
star
6

sass-loader

Compiles Sass to CSS
JavaScript
3,899
star
7

postcss-loader

PostCSS loader for webpack
JavaScript
2,855
star
8

copy-webpack-plugin

Copy files and directories with webpack
JavaScript
2,836
star
9

webpack-hot-middleware

Webpack hot reloading you can attach to your own server
JavaScript
2,336
star
10

terser-webpack-plugin

Terser Plugin
JavaScript
1,939
star
11

style-loader

Style Loader
JavaScript
1,651
star
12

worker-loader

A webpack loader that registers a script as a Web Worker
JavaScript
1,455
star
13

install-webpack-plugin

Speed up development by automatically installing & saving dependencies with Webpack.
JavaScript
1,432
star
14

compression-webpack-plugin

Prepare compressed versions of assets to serve them with Content-Encoding
JavaScript
1,409
star
15

url-loader

A loader for webpack which transforms files into base64 URIs
JavaScript
1,403
star
16

uglifyjs-webpack-plugin

[deprecated] UglifyJS Plugin
JavaScript
1,382
star
17

html-loader

HTML Loader
JavaScript
1,164
star
18

thread-loader

Runs the following loaders in a worker pool
JavaScript
1,115
star
19

webpack-serve

Repository has moved:
JavaScript
1,092
star
20

eslint-loader

[DEPRECATED] A ESlint loader for webpack
JavaScript
1,057
star
21

less-loader

Compiles Less to CSS
JavaScript
956
star
22

raw-loader

A loader for webpack that allows importing files as a String
JavaScript
844
star
23

purifycss-webpack

UNMAINTAINED, use https://github.com/FullHuman/purgecss-webpack-plugin
JavaScript
772
star
24

bundle-loader

Bundle Loader
JavaScript
658
star
25

cache-loader

[DEPRECATED] Caches the result of following loaders on disk
JavaScript
637
star
26

expose-loader

Expose Loader
JavaScript
546
star
27

imports-loader

Imports Loader
JavaScript
519
star
28

stylus-loader

🎨 A stylus loader for webpack.
JavaScript
499
star
29

babel-minify-webpack-plugin

[DEPRECATED] Babel Minify Webpack Plugin
JavaScript
493
star
30

svg-inline-loader

Inline SVG loader with cleaning-up functionality
JavaScript
490
star
31

json-loader

json loader module for webpack - UNMAINTAINED
JavaScript
436
star
32

closure-webpack-plugin

Webpack Google Closure Compiler and Closure Library plugin -
JavaScript
433
star
33

stylelint-webpack-plugin

A Stylelint plugin for webpack
JavaScript
426
star
34

source-map-loader

extract sourceMappingURL comments from modules and offer it to webpack
JavaScript
362
star
35

script-loader

[deprecated] Script Loader
JavaScript
325
star
36

i18n-webpack-plugin

[DEPRECATED] Embed localization into your bundle
JavaScript
317
star
37

css-minimizer-webpack-plugin

cssnano plugin for Webpack
JavaScript
314
star
38

istanbul-instrumenter-loader

Istanbul Instrumenter Loader
JavaScript
273
star
39

grunt-webpack

integrate webpack into grunt build process
JavaScript
267
star
40

react-proxy-loader

Wraps a react component in a proxy component to enable Code Splitting.
JavaScript
259
star
41

eslint-webpack-plugin

A ESLint plugin for webpack
JavaScript
257
star
42

image-minimizer-webpack-plugin

Webpack loader and plugin to compress images using imagemin
JavaScript
235
star
43

exports-loader

Exports Loader
JavaScript
216
star
44

webpack-command

[DEPRECATED] Lightweight, modular, and opinionated webpack CLI that provides a superior experience
JavaScript
212
star
45

webpack-stylish

A stylish, optionated reporter for webpack
JavaScript
200
star
46

val-loader

val loader module for webpack
JavaScript
183
star
47

mocha-loader

Mocha Loader
JavaScript
146
star
48

null-loader

[DEPRECATED] A loader that returns an empty module (can still be used for webpack 4).
JavaScript
145
star
49

coffee-loader

CoffeeScript Loader
JavaScript
144
star
50

webpack-hot-client

webpack HMR Client
JavaScript
121
star
51

node-loader

node loader for native modules
JavaScript
117
star
52

transform-loader

transform loader for webpack
JavaScript
110
star
53

webpack-defaults

Defaults to be shared across webpack projects
JavaScript
108
star
54

json5-loader

[Deprecated] JSON5 loader for Webpack (can still be used for webpack 4)
JavaScript
72
star
55

jshint-loader

[DEPRECATED] jshint loader for webpack, please migrate on `eslint`
JavaScript
67
star
56

webpack-canary

Canary tooling for checking webpack dependencies against specific webpack versions
JavaScript
47
star
57

multi-loader

[DEPRECATED] A loader that splits a module into multiple modules loaded with different loaders.
JavaScript
44
star
58

webpack-log

[DEPRECATED] Please use logger API https://github.com/webpack/webpack/pull/9436
JavaScript
38
star
59

zopfli-webpack-plugin

[DEPRECATED] Prepare compressed versions of assets with node-zopfli
JavaScript
26
star
60

component-webpack-plugin

Use components with webpack - UNMAINTAINED
JavaScript
20
star
61

remark-loader

Load markdown through remark with image resolving and some react-specific features.
JavaScript
16
star
62

json-minimizer-webpack-plugin

JSON minimizer webpack plugin
JavaScript
15
star
63

gzip-loader

[DEPRECATED] gzip loader module for webpack
JavaScript
15
star
64

yaml-frontmatter-loader

[DEPRECATED] Yaml frontmatter loader
JavaScript
14
star
65

config-loader

[DEPRECATED] A loader for webpack configuration files
JavaScript
14
star
66

html-minimizer-webpack-plugin

HTML minimizer webpack plugin
JavaScript
14
star
67

organization

Applications, Standards & Documentation for webpack-contrib.
13
star
68

i18n-loader

i18n loader module for webpack - UNMAINTAINED
JavaScript
11
star
69

eslint-config-webpack

Webpack standard eslint configuration
JavaScript
10
star
70

coffee-redux-loader

coffee redux loader module for webpack - UNMAINTAINED
JavaScript
7
star
71

test-utils

webpack Loader/Plugin Test Helpers
JavaScript
6
star
72

coverjs-loader

coverjs loader module for webpack - UNMAINTAINED
JavaScript
4
star
73

circleci-node8

[DEPRECATED] Please migrate on azure pipelines. CircleCI 2.0 NodeJS 8 build container -
Dockerfile
3
star
74

restyle-loader

[DEPRECATED] Use https://github.com/danielverejan/restyle-loader
JavaScript
3
star
75

tag-versions

A commandline wrapper around omichelsen/compare-versions to compare dist-tags
JavaScript
2
star
76

circleci-node-base

CircleCI 2.0 base build container -
Dockerfile
1
star
77

babel-preset-webpack

[DEPRECATED] Webpack Organization es2015 Babel Preset - See:
JavaScript
1
star
78

circleci-node9

[DEPRECATED] Please migrate on azure pipelines. CircleCI 2.0 NodeJS 9 build container -
Dockerfile
1
star
79

circleci-node-jdk8

Deprecated, use ->
1
star
80

cli-utils

[DEPRECATED] A suite of utilities for webpack projects which expose a CLI
JavaScript
1
star