@harveyprince/file-loader NPM

npm install --save-dev @harveyprince/file-loader

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

import img from './file.png'

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: '@harveyprince/file-loader',
            options: {}  
          }
        ]
      }
    ]
  }
}

Emits file.png as file in the output directory and returns the public URL

"/public/path/0dcbbaa7013869e351f.png"

Name	Type	Default	Description
`name`	`{String\\|Function}`	`[hash].[ext]`	Configure a custom filename template for your file
`context`	`{String}`	`this.options.context`	Configure a custom file context, defaults to `webpack.config.js` context
`publicPath`	`{String\\|Function}`	`__webpack_public_path__`	Configure a custom `public` path for your files
`publicPathWrapper`	`{Function}`	`'undefined'`	Should be `function(){}` if you wish to dynamicly change the public path in the runtime
`outputPath`	`{String\\|Function}`	`'undefined'`	Configure a custom `output` path for your files
`useRelativePath`	`{Boolean}`	`false`	Should be `true` if you wish to generate a `context` relative URL for each file
`emitFile`	`{Boolean}`	`true`	By default a file is emitted, however this can be disabled if required (e.g. for server side packages)

`name`

You can configure a custom filename template for your file using the query parameter name. For instance, to copy a file from your context directory into the output directory retaining the full directory structure, you might use

`{String}`

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name: '[path][name].[ext]'
  }  
}

`{Function}`

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name (file) {
      if (env === 'development') {
        return '[path][name].[ext]'
      }

      return '[hash].[ext]'
    }
  }  
}

`placeholders`

Name	Type	Default	Description
`[ext]`	`{String}`	`file.extname`	The extension of the resource
`[name]`	`{String}`	`file.basename`	The basename of the resource
`[path]`	`{String}`	`file.dirname`	The path of the resource relative to the `context`
`[hash]`	`{String}`	`md5`	The hash of the content, hashes below for more info
`[N]`	`{Number}`	\|The `n-th` match obtained from matching the current file name against the query param `regExp`

`hashes`

[<hashType>:hash:<digestType>:<length>] optionally you can configure

Name	Type	Default	Description
`hashType`	`{String}`	`md5`	`sha1`, `md5`, `sha256`, `sha512`
`digestType`	`{String}`	`base64`	`hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
`length`	`{Number}`	`8`	The length in chars

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

`context`

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name: '[path][name].[ext]',
    context: ''
  }  
}

You can specify custom output and public paths by using outputPath, publicPath and useRelativePath

`publicPath`

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name: '[path][name].[ext]',
    publicPath: 'assets/'
  }  
}

`publicPathWrapper`

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name: '[path][name].[ext]',
    publicPath: 'assets/',
    publicPathWrapper: function(path){
      return window.location.protocol + '//' + path;
    }
  }  
}

`outputPath`

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name: '[path][name].[ext]',
    outputPath: 'images/'
  }  
}

`useRelativePath`

useRelativePath should be true if you wish to generate a relative URL to the for each file context.

{
  loader: '@harveyprince/file-loader',
  options: {
    useRelativePath: process.env.NODE_ENV === "production"
  }
}

`emitFile`

By default a file is emitted, however this can be disabled if required (e.g. for server side packages).

import img from './file.png'

{
  loader: '@harveyprince/file-loader',
  options: {
    emitFile: false
  }  
}

⚠️ Returns the public URL but does not emit a file

`${publicPath}/0dcbbaa701328e351f.png`

import png from 'image.png'

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name: 'dirname/[hash].[ext]'
  }  
}

dirname/0dcbbaa701328ae351f.png

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name: '[sha512:hash:base64:7].[ext]'
  }  
}

gdyb21L.png

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

webpack.config.js

{
  loader: '@harveyprince/file-loader',
  options: {
    name: '[path][name].[ext]?[hash]'
  }  
}

path/to/file.png?e43b20c069c4a01867c31e98cbce33c9

loader-utils schema-utils

@everything-registry/sub-chunk-387

1.1.7

6 years ago

1.1.6

6 years ago