1 | <div align="center">
|
2 | <a href="https://github.com/webpack/webpack">
|
3 | <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | [![npm][npm]][npm-url]
|
8 | [![node][node]][node-url]
|
9 | [![deps][deps]][deps-url]
|
10 | [![tests][tests]][tests-url]
|
11 | [![chat][chat]][chat-url]
|
12 |
|
13 | # file-loader
|
14 |
|
15 | A file loader module for webpack
|
16 |
|
17 | ## Requirements
|
18 |
|
19 | This module requires a minimum of Node v6.9.0 and works with Webpack v3 and Webpack v4.
|
20 |
|
21 | ## Getting Started
|
22 |
|
23 | To begin, you'll need to install `file-loader`:
|
24 |
|
25 | ```console
|
26 | $ npm install file-loader --save-dev
|
27 | ```
|
28 |
|
29 | Import (or `require`) the target file(s) in one of the bundle's files:
|
30 |
|
31 | ```js
|
32 | // bundle file
|
33 | import img from './file.png'
|
34 | ```
|
35 |
|
36 | Then add the loader to your `webpack` config. For example:
|
37 |
|
38 | ```js
|
39 | // webpack.config.js
|
40 | module.exports = {
|
41 | module: {
|
42 | rules: [
|
43 | {
|
44 | test: /\.(png|jpg|gif)$/,
|
45 | use: [
|
46 | {
|
47 | loader: 'file-loader',
|
48 | options: {}
|
49 | }
|
50 | ]
|
51 | }
|
52 | ]
|
53 | }
|
54 | }
|
55 | ```
|
56 |
|
57 | And run `webpack` via your preferred method. This will emit `file.png` as a file
|
58 | in the output directory (with the specified naming convention, if options are
|
59 | specified to do so) and returns the public URI of the file.
|
60 |
|
61 | _Note: By default the filename of the resulting file is the MD5 hash of the
|
62 | file's contents with the original extension of the required resource._
|
63 |
|
64 | ## Options
|
65 |
|
66 | ### `context`
|
67 |
|
68 | Type: `String`
|
69 | Default: [`context`](https://webpack.js.org/configuration/entry-context/#context)
|
70 |
|
71 | Specifies a custom file context.
|
72 |
|
73 | ```js
|
74 | // webpack.config.js
|
75 | ...
|
76 | {
|
77 | loader: 'file-loader',
|
78 | options: {
|
79 | name: '[path][name].[ext]',
|
80 | context: ''
|
81 | }
|
82 | }
|
83 | ...
|
84 | ```
|
85 |
|
86 | ### `emitFile`
|
87 |
|
88 | Type: `Boolean`
|
89 | Default: `true`
|
90 |
|
91 | If true, emits a file (writes a file to the filesystem). If false, the loader
|
92 | will return a public URI but _will not_ emit the file. It is often useful to
|
93 | disable this option for server-side packages.
|
94 |
|
95 | ```js
|
96 | // bundle file
|
97 | import img from './file.png'
|
98 | ```
|
99 |
|
100 | ```js
|
101 | // webpack.config.js
|
102 | ...
|
103 | {
|
104 | loader: 'file-loader',
|
105 | options: {
|
106 | emitFile: false
|
107 | }
|
108 | }
|
109 | ...
|
110 | ```
|
111 |
|
112 | ### `name`
|
113 |
|
114 | Type: `String|Function`
|
115 | Default: `'[hash].[ext]'`
|
116 |
|
117 | Specifies a custom filename template for the target file(s) using the query
|
118 | parameter `name`. For example, to copy a file from your `context` directory into
|
119 | the output directory retaining the full directory structure, you might use:
|
120 |
|
121 | ```js
|
122 | // webpack.config.js
|
123 | {
|
124 | loader: 'file-loader',
|
125 | options: {
|
126 | name: '[path][name].[ext]'
|
127 | }
|
128 | }
|
129 | ```
|
130 |
|
131 | Or using a `Function`:
|
132 |
|
133 | ```js
|
134 | // webpack.config.js
|
135 | ...
|
136 | {
|
137 | loader: 'file-loader',
|
138 | options: {
|
139 | name (file) {
|
140 | if (env === 'development') {
|
141 | return '[path][name].[ext]'
|
142 | }
|
143 |
|
144 | return '[hash].[ext]'
|
145 | }
|
146 | }
|
147 | }
|
148 | ...
|
149 | ```
|
150 |
|
151 | _Note: By default the path and name you specify will output the file in that
|
152 | same directory, and will also use the same URI path to access the file._
|
153 |
|
154 | ### `outputPath`
|
155 |
|
156 | Type: `String|Function`
|
157 | Default: `undefined`
|
158 |
|
159 | Specify a filesystem path where the target file(s) will be placed.
|
160 |
|
161 | ```js
|
162 | // webpack.config.js
|
163 | ...
|
164 | {
|
165 | loader: 'file-loader',
|
166 | options: {
|
167 | name: '[path][name].[ext]',
|
168 | outputPath: 'images/'
|
169 | }
|
170 | }
|
171 | ...
|
172 | ```
|
173 |
|
174 | ### `publicPath`
|
175 |
|
176 | Type: `String|Function`
|
177 | Default: [`__webpack_public_path__`](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)
|
178 |
|
179 | Specifies a custom public path for the target file(s).
|
180 |
|
181 | ```js
|
182 | // webpack.config.js
|
183 | ...
|
184 | {
|
185 | loader: 'file-loader',
|
186 | options: {
|
187 | name: '[path][name].[ext]',
|
188 | publicPath: 'assets/'
|
189 | }
|
190 | }
|
191 | ...
|
192 | ```
|
193 |
|
194 | ### `regExp`
|
195 |
|
196 | Type: `RegExp`
|
197 | Default: `undefined`
|
198 |
|
199 | Specifies a Regular Expression to one or many parts of the target file path.
|
200 | The capture groups can be reused in the `name` property using `[N]`
|
201 | [placeholder](https://github.com/webpack-contrib/file-loader#placeholders).
|
202 |
|
203 | ```js
|
204 | import img from './customer01/file.png'
|
205 | ```
|
206 |
|
207 | **webpack.config.js**
|
208 | ```js
|
209 | {
|
210 | loader: 'file-loader',
|
211 | options: {
|
212 | regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
|
213 | name: '[1]-[name].[ext]'
|
214 | }
|
215 | }
|
216 | ```
|
217 |
|
218 | _Note: If `[0]` is used, it will be replaced by the entire tested string,
|
219 | whereas `[1]` will contain the first capturing parenthesis of your regex and so
|
220 | on..._
|
221 |
|
222 | ### `useRelativePath`
|
223 |
|
224 | Type: `Boolean`
|
225 | Default: `false`
|
226 |
|
227 | Specifies whether or not to generate a relative URI for each target file context.
|
228 |
|
229 | ```js
|
230 | // webpack.config.js
|
231 | {
|
232 | loader: 'file-loader',
|
233 | options: {
|
234 | useRelativePath: process.env.NODE_ENV === "production"
|
235 | }
|
236 | }
|
237 | ```
|
238 |
|
239 | ## Placeholders
|
240 |
|
241 | ### `[ext]`
|
242 |
|
243 | Type: `String`
|
244 | Default: `file.extname`
|
245 |
|
246 | The file extension of the target file/resource.
|
247 |
|
248 | ### `[hash]`
|
249 |
|
250 | Type: `String`
|
251 | Default: `'md5'`
|
252 |
|
253 | Specifies the hash method to use for hashing the file content. See
|
254 | [Hashes](https://github.com/webpack-contrib/file-loader#hashes).
|
255 |
|
256 | ### `[N]`
|
257 |
|
258 | Type: `String`
|
259 | Default: `undefined`
|
260 |
|
261 | The n-th match obtained from matching the current file name against the regExp
|
262 |
|
263 | ### `[name]`
|
264 |
|
265 | Type: `String`
|
266 | Default: `file.basename`
|
267 |
|
268 | The basename of the file/resource.
|
269 |
|
270 | ### `[path]`
|
271 |
|
272 | Type: `String`
|
273 | Default: `file.dirname`
|
274 |
|
275 | The path of the resource relative to the webpack/config context.
|
276 |
|
277 | ## Hashes
|
278 |
|
279 | Custom hashes can be used by specifying a hash with the following format:
|
280 | `[<hashType>:hash:<digestType>:<length>]`.
|
281 |
|
282 | ### `digestType`
|
283 |
|
284 | Type: `String`
|
285 | Default: `'hex'`
|
286 |
|
287 | The [digest](https://en.wikipedia.org/wiki/Cryptographic_hash_function) that the
|
288 | hash function should use. Valid values include: base26, base32, base36,
|
289 | base49, base52, base58, base62, base64, and hex.
|
290 |
|
291 | ### `hashType`
|
292 |
|
293 | Type: `String`
|
294 | Default: `'md5'`
|
295 |
|
296 | The type of hash that the has function should use. Valid values include: md5,
|
297 | sha1, sha256, and sha512.
|
298 |
|
299 | ### `length`
|
300 |
|
301 | Type: `Number`
|
302 | Default: `9999`
|
303 |
|
304 | Users may also specify a length for the computed hash.
|
305 |
|
306 | ## Examples
|
307 |
|
308 | The following examples show how one might use `file-loader` and what the result
|
309 | would be.
|
310 |
|
311 | ```js
|
312 | // bundle file
|
313 | import png from 'image.png'
|
314 | ```
|
315 |
|
316 | ```js
|
317 | // webpack.config.js
|
318 | {
|
319 | loader: 'file-loader',
|
320 | options: {
|
321 | name: 'dirname/[hash].[ext]'
|
322 | }
|
323 | }
|
324 | ```
|
325 |
|
326 | ```bash
|
327 | # result
|
328 | dirname/0dcbbaa701328ae351f.png
|
329 | ```
|
330 |
|
331 | ---
|
332 |
|
333 | ```js
|
334 | // webpack.config.js
|
335 | {
|
336 | loader: 'file-loader',
|
337 | options: {
|
338 | name: '[sha512:hash:base64:7].[ext]'
|
339 | }
|
340 | }
|
341 | ```
|
342 |
|
343 | ```bash
|
344 | # result
|
345 | gdyb21L.png
|
346 | ```
|
347 |
|
348 | ---
|
349 |
|
350 | ```js
|
351 | // bundle file
|
352 | import png from 'path/to/file.png'
|
353 | ```
|
354 |
|
355 | ```js
|
356 | // webpack.config.js
|
357 | {
|
358 | loader: 'file-loader',
|
359 | options: {
|
360 | name: '[path][name].[ext]?[hash]'
|
361 | }
|
362 | }
|
363 | ```
|
364 |
|
365 | ```bash
|
366 | # result
|
367 | path/to/file.png?e43b20c069c4a01867c31e98cbce33c9
|
368 | ```
|
369 |
|
370 | ## Contributing
|
371 |
|
372 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
373 |
|
374 | #### [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
375 |
|
376 | ## License
|
377 |
|
378 | #### [MIT](./LICENSE)
|
379 |
|
380 | [npm]: https://img.shields.io/npm/v/file-loader.svg
|
381 | [npm-url]: https://npmjs.com/package/file-loader
|
382 |
|
383 | [node]: https://img.shields.io/node/v/file-loader.svg
|
384 | [node-url]: https://nodejs.org
|
385 |
|
386 | [deps]: https://david-dm.org/webpack-contrib/file-loader.svg
|
387 | [deps-url]: https://david-dm.org/webpack-contrib/file-loader
|
388 |
|
389 | [tests]: https://img.shields.io/circleci/project/github/webpack-contrib/file-loader.svg
|
390 | [tests-url]: https://circleci.com/gh/webpack-contrib/file-loader
|
391 |
|
392 | [cover]: https://codecov.io/gh/webpack-contrib/file-loader/branch/master/graph/badge.svg
|
393 | [cover-url]: https://codecov.io/gh/webpack-contrib/file-loader
|
394 |
|
395 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
396 | [chat-url]: https://gitter.im/webpack/webpack
|