[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]
# file-loader
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`:
```console
$ npm install file-loader --save-dev
```
Import (or `require`) the target file(s) in one of the bundle's files:
**file.js**
```js
import img from './file.png';
```
Then add the loader to your `webpack` config. For example:
**webpack.config.js**
```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**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
};
```
#### `Function`
**webpack.config.js**
```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**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
outputPath: 'images',
},
},
],
},
};
```
#### `Function`
**webpack.config.js**
```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__`](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)+outputPath
Specifies a custom public path for the target file(s).
#### `String`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
publicPath: 'assets',
},
},
],
},
};
```
#### `Function`
**webpack.config.js**
```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**
```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`](https://webpack.js.org/configuration/entry-context/#context)
Specifies a custom file context.
```js
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**
```js
// bundle file
import img from './file.png';
```
**webpack.config.js**
```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](https://github.com/webpack-contrib/file-loader#placeholders).
**file.js**
```js
import img from './customer01/file.png';
```
**webpack.config.js**
```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](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
You can enable a CommonJS module syntax using:
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},
],
},
};
```
## Placeholders
Full information about placeholders you can find [here](https://github.com/webpack/loader-utils#interpolatename).
### `[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:]`
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.
### `[:hash::]`
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](https://en.wikipedia.org/wiki/Cryptographic_hash_function) 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 has 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**
```js
import png from './image.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'dirname/[contenthash].[ext]',
},
},
],
},
],
},
};
```
Result:
```bash
# result
dirname/0dcbbaa701328ae351f.png
```
---
**file.js**
```js
import png from './image.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[sha512:hash:base64:7].[ext]',
},
},
],
},
],
},
};
```
Result:
```bash
# result
gdyb21L.png
```
---
**file.js**
```js
import png from './path/to/file.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]?[contenthash]',
},
},
],
},
],
},
};
```
Result:
```bash
# result
path/to/file.png?e43b20c069c4a01867c31e98cbce33c9
```
### CDN
The following examples show how to use `file-loader` for CDN uses query params.
**file.js**
```js
import png from './directory/image.png?width=300&height=300';
```
**webpack.config.js**
```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:
```bash
# 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**
```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**
```js
import png from './image.png';
```
**webpack.config.js**
```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:
```bash
# result
https://cache.myserver.net/web/static/assets/image.somehash.png
```
Result when run with `NAMESPACE=dev` env variable:
```bash
# 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](./.github/CONTRIBUTING.md)
## License
[MIT](./LICENSE)
[npm]: https://img.shields.io/npm/v/file-loader.svg
[npm-url]: https://npmjs.com/package/file-loader
[node]: https://img.shields.io/node/v/file-loader.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/file-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/file-loader
[tests]: https://github.com/webpack-contrib/file-loader/workflows/file-loader/badge.svg
[tests-url]: https://github.com/webpack-contrib/file-loader/actions
[cover]: https://codecov.io/gh/webpack-contrib/file-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/file-loader
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack
[size]: https://packagephobia.now.sh/badge?p=file-loader
[size-url]: https://packagephobia.now.sh/result?p=file-loader
PK >[b # node_modules/schema-utils/README.mdnu W+A
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]
# schema-utils
Package for validate options in loaders and plugins.
## Getting Started
To begin, you'll need to install `schema-utils`:
```console
npm install schema-utils
```
## API
**schema.json**
```json
{
"type": "object",
"properties": {
"option": {
"type": "boolean"
}
},
"additionalProperties": false
}
```
```js
import schema from "./path/to/schema.json";
import { validate } from "schema-utils";
const options = { option: true };
const configuration = { name: "Loader Name/Plugin Name/Name" };
validate(schema, options, configuration);
```
### `schema`
Type: `String`
JSON schema.
Simple example of schema:
```json
{
"type": "object",
"properties": {
"name": {
"description": "This is description of option.",
"type": "string"
}
},
"additionalProperties": false
}
```
### `options`
Type: `Object`
Object with options.
```js
import schema from "./path/to/schema.json";
import { validate } from "schema-utils";
const options = { foo: "bar" };
validate(schema, { name: 123 }, { name: "MyPlugin" });
```
### `configuration`
Allow to configure validator.
There is an alternative method to configure the `name` and`baseDataPath` options via the `title` property in the schema.
For example:
```json
{
"title": "My Loader options",
"type": "object",
"properties": {
"name": {
"description": "This is description of option.",
"type": "string"
}
},
"additionalProperties": false
}
```
The last word used for the `baseDataPath` option, other words used for the `name` option.
Based on the example above the `name` option equals `My Loader`, the `baseDataPath` option equals `options`.
#### `name`
Type: `Object`
Default: `"Object"`
Allow to setup name in validation errors.
```js
import schema from "./path/to/schema.json";
import { validate } from "schema-utils";
const options = { foo: "bar" };
validate(schema, options, { name: "MyPlugin" });
```
```shell
Invalid configuration object. MyPlugin has been initialised using a configuration object that does not match the API schema.
- configuration.optionName should be a integer.
```
#### `baseDataPath`
Type: `String`
Default: `"configuration"`
Allow to setup base data path in validation errors.
```js
import schema from "./path/to/schema.json";
import { validate } from "schema-utils";
const options = { foo: "bar" };
validate(schema, options, { name: "MyPlugin", baseDataPath: "options" });
```
```shell
Invalid options object. MyPlugin has been initialised using an options object that does not match the API schema.
- options.optionName should be a integer.
```
#### `postFormatter`
Type: `Function`
Default: `undefined`
Allow to reformat errors.
```js
import schema from "./path/to/schema.json";
import { validate } from "schema-utils";
const options = { foo: "bar" };
validate(schema, options, {
name: "MyPlugin",
postFormatter: (formattedError, error) => {
if (error.keyword === "type") {
return `${formattedError}\nAdditional Information.`;
}
return formattedError;
},
});
```
```shell
Invalid options object. MyPlugin has been initialized using an options object that does not match the API schema.
- options.optionName should be a integer.
Additional Information.
```
## Examples
**schema.json**
```json
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"test": {
"anyOf": [
{ "type": "array" },
{ "type": "string" },
{ "instanceof": "RegExp" }
]
},
"transform": {
"instanceof": "Function"
},
"sourceMap": {
"type": "boolean"
}
},
"additionalProperties": false
}
```
### `Loader`
```js
import { getOptions } from "loader-utils";
import { validate } from "schema-utils";
import schema from "path/to/schema.json";
function loader(src, map) {
const options = getOptions(this);
validate(schema, options, {
name: "Loader Name",
baseDataPath: "options",
});
// Code...
}
export default loader;
```
### `Plugin`
```js
import { validate } from "schema-utils";
import schema from "path/to/schema.json";
class Plugin {
constructor(options) {
validate(schema, options, {
name: "Plugin Name",
baseDataPath: "options",
});
this.options = options;
}
apply(compiler) {
// Code...
}
}
export default Plugin;
```
## Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.
[CONTRIBUTING](./.github/CONTRIBUTING.md)
## License
[MIT](./LICENSE)
[npm]: https://img.shields.io/npm/v/schema-utils.svg
[npm-url]: https://npmjs.com/package/schema-utils
[node]: https://img.shields.io/node/v/schema-utils.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack/schema-utils.svg
[deps-url]: https://david-dm.org/webpack/schema-utils
[tests]: https://github.com/webpack/schema-utils/workflows/schema-utils/badge.svg
[tests-url]: https://github.com/webpack/schema-utils/actions
[cover]: https://codecov.io/gh/webpack/schema-utils/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack/schema-utils
[chat]: https://badges.gitter.im/webpack/webpack.svg
[chat-url]: https://gitter.im/webpack/webpack
[size]: https://packagephobia.com/badge?p=schema-utils
[size-url]: https://packagephobia.com/result?p=schema-utils
PK >[fE E A node_modules/schema-utils/declarations/keywords/absolutePath.d.tsnu W+A export default addAbsolutePathKeyword;
export type Ajv = import("ajv").Ajv;
export type ValidateFunction = import("ajv").ValidateFunction;
export type SchemaUtilErrorObject = import("../validate").SchemaUtilErrorObject;
/**
*
* @param {Ajv} ajv
* @returns {Ajv}
*/
declare function addAbsolutePathKeyword(ajv: Ajv): Ajv;
PK >[n% 6 node_modules/schema-utils/declarations/util/hints.d.tsnu W+A export function stringHints(schema: Schema, logic: boolean): string[];
export function numberHints(schema: Schema, logic: boolean): string[];
export type Schema = import("../validate").Schema;
PK >[ַ` 6 node_modules/schema-utils/declarations/util/Range.d.tsnu W+A export = Range;
/**
* @typedef {[number, boolean]} RangeValue
*/
/**
* @callback RangeValueCallback
* @param {RangeValue} rangeValue
* @returns {boolean}
*/
declare class Range {
/**
* @param {"left" | "right"} side
* @param {boolean} exclusive
* @returns {">" | ">=" | "<" | "<="}
*/
static getOperator(
side: "left" | "right",
exclusive: boolean
): ">" | ">=" | "<" | "<=";
/**
* @param {number} value
* @param {boolean} logic is not logic applied
* @param {boolean} exclusive is range exclusive
* @returns {string}
*/
static formatRight(value: number, logic: boolean, exclusive: boolean): string;
/**
* @param {number} value
* @param {boolean} logic is not logic applied
* @param {boolean} exclusive is range exclusive
* @returns {string}
*/
static formatLeft(value: number, logic: boolean, exclusive: boolean): string;
/**
* @param {number} start left side value
* @param {number} end right side value
* @param {boolean} startExclusive is range exclusive from left side
* @param {boolean} endExclusive is range exclusive from right side
* @param {boolean} logic is not logic applied
* @returns {string}
*/
static formatRange(
start: number,
end: number,
startExclusive: boolean,
endExclusive: boolean,
logic: boolean
): string;
/**
* @param {Array} values
* @param {boolean} logic is not logic applied
* @return {RangeValue} computed value and it's exclusive flag
*/
static getRangeValue(values: Array, logic: boolean): RangeValue;
/** @type {Array} */
_left: Array;
/** @type {Array} */
_right: Array;
/**
* @param {number} value
* @param {boolean=} exclusive
*/
left(value: number, exclusive?: boolean | undefined): void;
/**
* @param {number} value
* @param {boolean=} exclusive
*/
right(value: number, exclusive?: boolean | undefined): void;
/**
* @param {boolean} logic is not logic applied
* @return {string} "smart" range string representation
*/
format(logic?: boolean): string;
}
declare namespace Range {
export { RangeValue, RangeValueCallback };
}
type RangeValue = [number, boolean];
type RangeValueCallback = (rangeValue: RangeValue) => boolean;
PK >[6 4 node_modules/schema-utils/declarations/validate.d.tsnu W+A export type JSONSchema4 = import("json-schema").JSONSchema4;
export type JSONSchema6 = import("json-schema").JSONSchema6;
export type JSONSchema7 = import("json-schema").JSONSchema7;
export type ErrorObject = import("ajv").ErrorObject;
export type Extend = {
formatMinimum?: number | undefined;
formatMaximum?: number | undefined;
formatExclusiveMinimum?: boolean | undefined;
formatExclusiveMaximum?: boolean | undefined;
link?: string | undefined;
};
export type Schema = (JSONSchema4 | JSONSchema6 | JSONSchema7) & Extend;
export type SchemaUtilErrorObject = ErrorObject & {
children?: Array;
};
export type PostFormatter = (
formattedError: string,
error: SchemaUtilErrorObject
) => string;
export type ValidationErrorConfiguration = {
name?: string | undefined;
baseDataPath?: string | undefined;
postFormatter?: PostFormatter | undefined;
};
/**
* @param {Schema} schema
* @param {Array