// Type definitions for file-loader 5.0
|
// Project: https://github.com/webpack-contrib/file-loader
|
// Definitions by: Gareth Jones <https://github.com/g-rath>
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
// TypeScript Version: 3.7
|
import { loader } from 'webpack';
|
|
declare namespace FileLoader {
|
interface Options {
|
/**
|
* 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
|
* module.exports = {
|
* module: {
|
* rules: [
|
* {
|
* test: /\.(png|jpe?g|gif)$/i,
|
* loader: 'file-loader',
|
* options: {
|
* name: '[path][name].[ext]',
|
* },
|
* },
|
* ],
|
* },
|
* };
|
*
|
* @example
|
* 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]';
|
* },
|
* },
|
* },
|
* ],
|
* },
|
* };
|
*
|
* @default '[contenthash].[ext]'
|
*/
|
name?: string | ((file: string) => string);
|
/**
|
* 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
|
* 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}`;
|
* },
|
* },
|
* },
|
* ],
|
* },
|
* };
|
*
|
* @default undefined
|
*/
|
outputPath?: 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
|
* 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}`;
|
* },
|
* },
|
* },
|
* ],
|
* },
|
* };
|
*
|
* @default {@link https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific __webpack_public_path__}
|
*/
|
publicPath?: string | BuildResourcePathFn;
|
/**
|
* 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
|
* module.exports = {
|
* module: {
|
* rules: [
|
* {
|
* test: /\.(png|jpg|gif)$/i,
|
* loader: 'file-loader',
|
* options: {
|
* publicPath: '/some/path/',
|
* postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
|
* },
|
* },
|
* ],
|
* },
|
* };
|
*
|
* @default undefined
|
*/
|
postTransformPublicPath?: (p: string) => string;
|
/**
|
* Specifies a custom file context.
|
*
|
* @example
|
* module.exports = {
|
* module: {
|
* rules: [
|
* {
|
* test: /\.(png|jpe?g|gif)$/i,
|
* use: [
|
* {
|
* loader: 'file-loader',
|
* options: {
|
* context: 'project',
|
* },
|
* },
|
* ],
|
* },
|
* ],
|
* },
|
* };
|
*
|
* @default {@link https://webpack.js.org/configuration/entry-context/#context context}
|
*/
|
context?: string;
|
/**
|
* 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.
|
*
|
* @default true
|
*/
|
emitFile?: boolean;
|
/**
|
* 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]
|
* {@link https://github.com/webpack-contrib/file-loader#placeholders placeholder}.
|
*
|
* 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
|
* // 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]',
|
* },
|
* },
|
* ],
|
* },
|
* ],
|
* },
|
* };
|
*
|
* @default undefined
|
*/
|
regExp?: RegExp;
|
|
/**
|
* 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.
|
* @default true
|
*/
|
esModule?: boolean;
|
}
|
|
/**
|
* @param url
|
* @param resourcePath original absolute path to the asset
|
* @param context directory where assets are stored (`rootContext`), or the value of the `context` option if set.
|
*
|
* @return the path to use for the asset
|
*/
|
type BuildResourcePathFn = (url: string, resourcePath: string, context: string) => string;
|
}
|
|
declare const FileLoader: loader.Loader;
|
export = FileLoader;
|
