Skip to content
This repository was archived by the owner on Mar 17, 2021. It is now read-only.
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: webpack-contrib/file-loader
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v0.10.1
Choose a base ref
...
head repository: webpack-contrib/file-loader
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v0.11.0
Choose a head ref
  • 2 commits
  • 6 files changed
  • 2 contributors

Commits on Mar 31, 2017

  1. feat: Emit files with relative urls (#135) 

    * new configuration to emit files with relative URLs

* Added support for relativePath option

* Changed the 'relativePath' parameter name to 'useRelativePath'

* feat: 'useRelativePath' working on dev mode too

* style: more readable code

* fix: posix on windows
    @adriancmiranda @joshwiens
    adriancmiranda authored and joshwiens committed Mar 31, 2017

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    GPG key ID: B5690EEEBB952194
    Verified
    Learn about vigilant mode
    Copy the full SHA
    dbcd6cc View commit details

  2. chore(release): 0.11.0

    @joshwiens
    joshwiens committed Mar 31, 2017

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    GPG key ID: B5690EEEBB952194
    Verified
    Learn about vigilant mode
    Copy the full SHA
    46cb916 View commit details
Showing with 226 additions and 161 deletions.
  1. +8 −0 .gitignore
  2. +10 −0 CHANGELOG.md
  3. +155 −145 README.md
  4. +35 −14 index.js
  5. +1 −1 package.json
  6. +17 −1 test/correct-filename.test.js
8 changes: 8 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,10 @@
# development
/node_modules
/coverage
*.log

# dotfiles
.*
!.gitignore
*~
*#*
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -2,6 +2,16 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

<a name="0.11.0"></a>
# [0.11.0](https://github.com/webpack/file-loader/compare/v0.10.1...v0.11.0) (2017-03-31)


### Features

* Emit files with relative urls ([#135](https://github.com/webpack/file-loader/issues/135)) ([dbcd6cc](https://github.com/webpack/file-loader/commit/dbcd6cc))



<a name="0.10.1"></a>
## [0.10.1](https://github.com/webpack/file-loader/compare/v0.10.0...v0.10.1) (2017-02-25)

300 changes: 155 additions & 145 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,155 @@
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]

<div align="center">
<a href="https://github.com/webpack/webpack">
<img width="200" height="200"
src="https://webpack.js.org/assets/icon-square-big.svg">
</a>
<h1>File Loader</h1>
</div>

<h2 align="center">Install</h2>

```bash
npm install --save-dev file-loader
```

<h2 align="center">Usage</h2>

By default the filename of the resulting file is the MD5 hash of the file's contents
with the original extension of the required resource.

``` javascript
var url = require("file-loader!./file.png");
// => emits file.png as file in the output directory and returns the public url
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
```

By default a file is emitted, however this can be disabled if required (e.g. for server
side packages).

``` javascript
var url = require("file-loader?emitFile=false!./file.png");
// => returns the public url but does NOT emit a file
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
```

#### Filename templates

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]`.

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.

You can specify custom output and public paths by using the `outputPath` and `publicPath` query name parameters:

```
use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"
```

#### Filename template placeholders

* `[ext]` the extension of the resource
* `[name]` the basename of the resource
* `[path]` the path of the resource relative to the `context` query parameter or option.
* `[hash]` the hash of the content, `hex`-encoded `md5` by default
* `[<hashType>:hash:<digestType>:<length>]` optionally you can configure
* other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512`
* other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* and `length` the length in chars
* `[N]` the N-th match obtained from matching the current file name against the query param `regExp`

#### Examples

``` javascript
require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js

require("file-loader?name=html-[hash:6].html!./page.html");
// => html-109fa8.html

require("file-loader?name=[hash]!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679

require("file-loader?name=[sha512:hash:base64:7].[ext]!./image.png");
// => gdyb21L.png
// use sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=picture.png!./myself.png");
// => picture.png

require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9
```

<h2 align="center">Contributing</h2>

Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.

<h2 align="center">Maintainers</h2>

<table>
<tbody>
<tr>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/sokra?v=3">
<br />
<a href="https://github.com/">Tobias Koppers</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/SpaceK33z?v=3">
<br />
<a href="https://github.com/">Kees Kluskens</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/mobitar?v=3">
<br />
<a href="https://github.com/">Mo Bitar</a>
</td>
</tr>
</tbody>
</table>


<h2 align="center">LICENSE</h2>

MIT

[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]: http://img.shields.io/travis/webpack-contrib/file-loader.svg
[tests-url]: https://travis-ci.org/webpack-contrib/file-loader

[cover]: https://coveralls.io/repos/github/webpack-contrib/file-loader/badge.svg
[cover-url]: https://coveralls.io/github/webpack-contrib/file-loader

[chat]: https://badges.gitter.im/webpack/webpack.svg
[chat-url]: https://gitter.im/webpack/webpack
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]

<div align="center">
<a href="https://github.com/webpack/webpack">
<img width="200" height="200"
src="https://webpack.js.org/assets/icon-square-big.svg">
</a>
<h1>File Loader</h1>
</div>

<h2 align="center">Install</h2>

```bash
npm install --save-dev file-loader
```

<h2 align="center">Usage</h2>

By default the filename of the resulting file is the MD5 hash of the file's contents
with the original extension of the required resource.

``` javascript
var url = require("file-loader!./file.png");
// => emits file.png as file in the output directory and returns the public url
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
```

By default a file is emitted, however this can be disabled if required (e.g. for server
side packages).

``` javascript
var url = require("file-loader?emitFile=false!./file.png");
// => returns the public url but does NOT emit a file
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
```

#### Filename templates

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]`.

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.

You can specify custom output and public paths by using the `outputPath`, `publicPath` and `useRelativePath` query name parameters:

```
use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"
```

`useRelativePath` should be `true` if you wish to generate relative URL to the each file context
```javascript
{
loader: 'file-loader',
query: {
useRelativePath: process.env.NODE_ENV === "production"
}
}
```

#### Filename template placeholders

* `[ext]` the extension of the resource
* `[name]` the basename of the resource
* `[path]` the path of the resource relative to the `context` query parameter or option.
* `[hash]` the hash of the content, `hex`-encoded `md5` by default
* `[<hashType>:hash:<digestType>:<length>]` optionally you can configure
* other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512`
* other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* and `length` the length in chars
* `[N]` the N-th match obtained from matching the current file name against the query param `regExp`

#### Examples

``` javascript
require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js

require("file-loader?name=html-[hash:6].html!./page.html");
// => html-109fa8.html

require("file-loader?name=[hash]!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679

require("file-loader?name=[sha512:hash:base64:7].[ext]!./image.png");
// => gdyb21L.png
// use sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=picture.png!./myself.png");
// => picture.png

require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9
```

<h2 align="center">Contributing</h2>

Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.

<h2 align="center">Maintainers</h2>

<table>
<tbody>
<tr>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/sokra?v=3">
<br />
<a href="https://github.com/">Tobias Koppers</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/SpaceK33z?v=3">
<br />
<a href="https://github.com/">Kees Kluskens</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/mobitar?v=3">
<br />
<a href="https://github.com/">Mo Bitar</a>
</td>
</tr>
</tbody>
</table>


<h2 align="center">LICENSE</h2>

MIT

[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]: http://img.shields.io/travis/webpack-contrib/file-loader.svg
[tests-url]: https://travis-ci.org/webpack-contrib/file-loader

[cover]: https://coveralls.io/repos/github/webpack-contrib/file-loader/badge.svg
[cover-url]: https://coveralls.io/github/webpack-contrib/file-loader

[chat]: https://badges.gitter.im/webpack/webpack.svg
[chat-url]: https://gitter.im/webpack/webpack
Loading