1 | // Type definitions for file-loader 5.0
|
2 | // Project: https://github.com/webpack-contrib/file-loader
|
3 | // Definitions by: Gareth Jones <https://github.com/g-rath>
|
4 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
5 | // TypeScript Version: 3.7
|
6 | import { loader } from 'webpack';
|
7 |
|
8 | declare namespace FileLoader {
|
9 | interface Options {
|
10 | /**
|
11 | * Specifies a custom filename template for the target file(s) using the query parameter name.
|
12 | *
|
13 | * By default the path and name you specify will output the file in that same directory,
|
14 | * and will also use the same URI path to access the file.
|
15 | *
|
16 | * For example, to emit a file from your context directory into the output directory retaining the full
|
17 | * directory structure, you might use:
|
18 | *
|
19 | * @example
|
20 | * module.exports = {
|
21 | * module: {
|
22 | * rules: [
|
23 | * {
|
24 | * test: /\.(png|jpe?g|gif)$/i,
|
25 | * loader: 'file-loader',
|
26 | * options: {
|
27 | * name: '[path][name].[ext]',
|
28 | * },
|
29 | * },
|
30 | * ],
|
31 | * },
|
32 | * };
|
33 | *
|
34 | * @example
|
35 | * module.exports = {
|
36 | * module: {
|
37 | * rules: [
|
38 | * {
|
39 | * test: /\.(png|jpe?g|gif)$/i,
|
40 | * loader: 'file-loader',
|
41 | * options: {
|
42 | * name(file) {
|
43 | * if (process.env.NODE_ENV === 'development') {
|
44 | * return '[path][name].[ext]';
|
45 | * }
|
46 | *
|
47 | * return '[contenthash].[ext]';
|
48 | * },
|
49 | * },
|
50 | * },
|
51 | * ],
|
52 | * },
|
53 | * };
|
54 | *
|
55 | * @default '[contenthash].[ext]'
|
56 | */
|
57 | name?: string | ((file: string) => string) | undefined;
|
58 | /**
|
59 | * Specify a filesystem path where the target file(s) will be placed.
|
60 | *
|
61 | * Function gets passes the original absolute path to the asset,
|
62 | * as well as the directory where assets are stored.
|
63 | *
|
64 | * @example
|
65 | * module.exports = {
|
66 | * module: {
|
67 | * rules: [
|
68 | * {
|
69 | * test: /\.(png|jpe?g|gif)$/i,
|
70 | * loader: 'file-loader',
|
71 | * options: {
|
72 | * outputPath: (url, resourcePath, context) => {
|
73 | * if (/my-custom-image\.png/.test(resourcePath)) {
|
74 | * return `other_output_path/${url}`;
|
75 | * }
|
76 | *
|
77 | * if (/images/.test(context)) {
|
78 | * return `image_output_path/${url}`;
|
79 | * }
|
80 | *
|
81 | * return `output_path/${url}`;
|
82 | * },
|
83 | * },
|
84 | * },
|
85 | * ],
|
86 | * },
|
87 | * };
|
88 | *
|
89 | * undefined
|
90 | */
|
91 | outputPath?: string | BuildResourcePathFn | undefined;
|
92 | /**
|
93 | * Specifies a custom public path for the target file(s).
|
94 | *
|
95 | * Function gets passes the original absolute path to the asset,
|
96 | * as well as the directory where assets are stored.
|
97 | *
|
98 | * @example
|
99 | * module.exports = {
|
100 | * module: {
|
101 | * rules: [
|
102 | * {
|
103 | * test: /\.(png|jpe?g|gif)$/i,
|
104 | * loader: 'file-loader',
|
105 | * options: {
|
106 | * publicPath: (url, resourcePath, context) => {
|
107 | * if (/my-custom-image\.png/.test(resourcePath)) {
|
108 | * return `other_public_path/${url}`;
|
109 | * }
|
110 | *
|
111 | * if (/images/.test(context)) {
|
112 | * return `image_output_path/${url}`;
|
113 | * }
|
114 | *
|
115 | * return `public_path/${url}`;
|
116 | * },
|
117 | * },
|
118 | * },
|
119 | * ],
|
120 | * },
|
121 | * };
|
122 | *
|
123 | * @default {@link https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific __webpack_public_path__}
|
124 | */
|
125 | publicPath?: string | BuildResourcePathFn | undefined;
|
126 | /**
|
127 | * Specifies a custom function to post-process the generated public path.
|
128 | *
|
129 | * This can be used to prepend or append dynamic global variables that are only available at runtime, like
|
130 | * `__webpack_public_path__`. This would not be possible with just publicPath, since it stringifies the values.
|
131 | *
|
132 | * @example
|
133 | * module.exports = {
|
134 | * module: {
|
135 | * rules: [
|
136 | * {
|
137 | * test: /\.(png|jpg|gif)$/i,
|
138 | * loader: 'file-loader',
|
139 | * options: {
|
140 | * publicPath: '/some/path/',
|
141 | * postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
|
142 | * },
|
143 | * },
|
144 | * ],
|
145 | * },
|
146 | * };
|
147 | *
|
148 | * @default undefined
|
149 | */
|
150 | postTransformPublicPath?: ((p: string) => string) | undefined;
|
151 | /**
|
152 | * Specifies a custom file context.
|
153 | *
|
154 | * @example
|
155 | * module.exports = {
|
156 | * module: {
|
157 | * rules: [
|
158 | * {
|
159 | * test: /\.(png|jpe?g|gif)$/i,
|
160 | * use: [
|
161 | * {
|
162 | * loader: 'file-loader',
|
163 | * options: {
|
164 | * context: 'project',
|
165 | * },
|
166 | * },
|
167 | * ],
|
168 | * },
|
169 | * ],
|
170 | * },
|
171 | * };
|
172 | *
|
173 | * @default {@link https://webpack.js.org/configuration/entry-context/#context context}
|
174 | */
|
175 | context?: string | undefined;
|
176 | /**
|
177 | * If `true`, emits a file (writes a file to the filesystem); otherwise, the loader will return a public URI
|
178 | * but will not emit the file. It is often useful to disable this option for server-side packages.
|
179 | *
|
180 | * @default true
|
181 | */
|
182 | emitFile?: boolean | undefined;
|
183 | /**
|
184 | * Specifies a Regular Expression to one or many parts of the target file path.
|
185 | * The capture groups can be reused in the name property using [N]
|
186 | * {@link https://github.com/webpack-contrib/file-loader#placeholders placeholder}.
|
187 | *
|
188 | * If [0] is used, it will be replaced by the entire tested string,
|
189 | * whereas [1] will contain the first capturing parenthesis of your regex and so on...
|
190 | *
|
191 | * @example
|
192 | * // file.js
|
193 | * import img from './customer01/file.png';
|
194 | *
|
195 | * // webpack.config.js
|
196 | * module.exports = {
|
197 | * module: {
|
198 | * rules: [
|
199 | * {
|
200 | * test: /\.(png|jpe?g|gif)$/i,
|
201 | * use: [
|
202 | * {
|
203 | * loader: 'file-loader',
|
204 | * options: {
|
205 | * regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/i,
|
206 | * name: '[1]-[name].[ext]',
|
207 | * },
|
208 | * },
|
209 | * ],
|
210 | * },
|
211 | * ],
|
212 | * },
|
213 | * };
|
214 | *
|
215 | * @default undefined
|
216 | */
|
217 | regExp?: RegExp | undefined;
|
218 |
|
219 | /**
|
220 | * By default, file-loader generates JS modules that use the ES modules syntax.
|
221 | * There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.
|
222 | * @default true
|
223 | */
|
224 | esModule?: boolean | undefined;
|
225 | }
|
226 |
|
227 | /**
|
228 | * @param url
|
229 | * @param resourcePath original absolute path to the asset
|
230 | * @param context directory where assets are stored (`rootContext`), or the value of the `context` option if set.
|
231 | *
|
232 | * @return the path to use for the asset
|
233 | */
|
234 | type BuildResourcePathFn = (url: string, resourcePath: string, context: string) => string;
|
235 | }
|
236 |
|
237 | declare const FileLoader: loader.Loader;
|
238 | export = FileLoader;
|