1 | [![npm][npm]][npm-url]
|
2 | [![node][node]][node-url]
|
3 | [![deps][deps]][deps-url]
|
4 | [![tests][tests]][tests-url]
|
5 | [![coverage][cover]][cover-url]
|
6 | [![chat][chat]][chat-url]
|
7 |
|
8 | <div align="center">
|
9 | <a href="https://github.com/webpack/webpack">
|
10 | <img width="200" height="200"
|
11 | src="https://webpack.js.org/assets/icon-square-big.svg">
|
12 | </a>
|
13 | <h1>File Loader</h1>
|
14 | </div>
|
15 |
|
16 | <h2 align="center">Install</h2>
|
17 |
|
18 | ```bash
|
19 | npm install --save-dev file-loader
|
20 | ```
|
21 |
|
22 | <h2 align="center">Usage</h2>
|
23 |
|
24 | By default the filename of the resulting file is the MD5 hash of the file's contents
|
25 | with the original extension of the required resource.
|
26 |
|
27 | ``` javascript
|
28 | var url = require("file-loader!./file.png");
|
29 | // => emits file.png as file in the output directory and returns the public url
|
30 | // => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
|
31 | ```
|
32 |
|
33 | By default a file is emitted, however this can be disabled if required (e.g. for server
|
34 | side packages).
|
35 |
|
36 | ``` javascript
|
37 | var url = require("file-loader?emitFile=false!./file.png");
|
38 | // => returns the public url but does NOT emit a file
|
39 | // => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
|
40 | ```
|
41 |
|
42 | #### Filename templates
|
43 |
|
44 | 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 `?name=[path][name].[ext]`.
|
45 |
|
46 | 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.
|
47 |
|
48 | You can specify custom output and public paths by using the `outputPath` and `publicPath` query name parameters:
|
49 |
|
50 | ```
|
51 | use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"
|
52 | ```
|
53 |
|
54 | #### Filename template placeholders
|
55 |
|
56 | * `[ext]` the extension of the resource
|
57 | * `[name]` the basename of the resource
|
58 | * `[path]` the path of the resource relative to the `context` query parameter or option.
|
59 | * `[hash]` the hash of the content, `hex`-encoded `md5` by default
|
60 | * `[<hashType>:hash:<digestType>:<length>]` optionally you can configure
|
61 | * other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512`
|
62 | * other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
|
63 | * and `length` the length in chars
|
64 | * `[N]` the N-th match obtained from matching the current file name against the query param `regExp`
|
65 |
|
66 | #### Examples
|
67 |
|
68 | ``` javascript
|
69 | require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
|
70 | // => js/0dcbbaa701328a3c262cfd45869e351f.script.js
|
71 |
|
72 | require("file-loader?name=html-[hash:6].html!./page.html");
|
73 | // => html-109fa8.html
|
74 |
|
75 | require("file-loader?name=[hash]!./flash.txt");
|
76 | // => c31e9820c001c9c4a86bce33ce43b679
|
77 |
|
78 | require("file-loader?name=[sha512:hash:base64:7].[ext]!./image.png");
|
79 | // => gdyb21L.png
|
80 | // use sha512 hash instead of md5 and with only 7 chars of base64
|
81 |
|
82 | require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
|
83 | // => img-VqzT5ZC.jpg
|
84 | // use custom name, sha512 hash instead of md5 and with only 7 chars of base64
|
85 |
|
86 | require("file-loader?name=picture.png!./myself.png");
|
87 | // => picture.png
|
88 |
|
89 | require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
|
90 | // => dir/file.png?e43b20c069c4a01867c31e98cbce33c9
|
91 | ```
|
92 |
|
93 | <h2 align="center">Contributing</h2>
|
94 |
|
95 | Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.
|
96 |
|
97 | <h2 align="center">Maintainers</h2>
|
98 |
|
99 | <table>
|
100 | <tbody>
|
101 | <tr>
|
102 | <td align="center">
|
103 | <img width="150" height="150"
|
104 | src="https://avatars.githubusercontent.com/sokra?v=3">
|
105 | <br />
|
106 | <a href="https://github.com/">Tobias Koppers</a>
|
107 | </td>
|
108 | <td align="center">
|
109 | <img width="150" height="150"
|
110 | src="https://avatars.githubusercontent.com/SpaceK33z?v=3">
|
111 | <br />
|
112 | <a href="https://github.com/">Kees Kluskens</a>
|
113 | </td>
|
114 | <td align="center">
|
115 | <img width="150" height="150"
|
116 | src="https://avatars.githubusercontent.com/mobitar?v=3">
|
117 | <br />
|
118 | <a href="https://github.com/">Mo Bitar</a>
|
119 | </td>
|
120 | </tr>
|
121 | </tbody>
|
122 | </table>
|
123 |
|
124 |
|
125 | <h2 align="center">LICENSE</h2>
|
126 |
|
127 | #### [MIT](./LICENSE)
|
128 |
|
129 | [npm]: https://img.shields.io/npm/v/file-loader.svg
|
130 | [npm-url]: https://npmjs.com/package/file-loader
|
131 |
|
132 | [node]: https://img.shields.io/node/v/file-loader.svg
|
133 | [node-url]: https://nodejs.org
|
134 |
|
135 | [deps]: https://david-dm.org/webpack-contrib/file-loader.svg
|
136 | [deps-url]: https://david-dm.org/webpack-contrib/file-loader
|
137 |
|
138 | [tests]: http://img.shields.io/travis/webpack-contrib/file-loader.svg
|
139 | [tests-url]: https://travis-ci.org/webpack-contrib/file-loader
|
140 |
|
141 | [cover]: https://coveralls.io/repos/github/webpack-contrib/file-loader/badge.svg
|
142 | [cover-url]: https://coveralls.io/github/webpack-contrib/file-loader
|
143 |
|
144 | [chat]: https://badges.gitter.im/webpack/webpack.svg
|
145 | [chat-url]: https://gitter.im/webpack/webpack
|