nav tabs on admin dashboard
This commit is contained in:
+352
-112
@@ -1,141 +1,381 @@
|
||||
<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>
|
||||
</div>
|
||||
|
||||
[![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>
|
||||
<p>Instructs webpack to emit the required object as file and to return its public url.</p>
|
||||
</div>
|
||||
# file-loader
|
||||
|
||||
<h2 align="center">Install</h2>
|
||||
A file loader module for webpack
|
||||
|
||||
```bash
|
||||
npm install --save-dev file-loader
|
||||
## Requirements
|
||||
|
||||
This module requires a minimum of Node v6.9.0 and works with Webpack v3 and Webpack v4.
|
||||
|
||||
## Getting Started
|
||||
|
||||
To begin, you'll need to install `file-loader`:
|
||||
|
||||
```console
|
||||
$ npm install file-loader --save-dev
|
||||
```
|
||||
|
||||
<h2 align="center">Usage</h2>
|
||||
Import (or `require`) the target file(s) in one of the bundle's files:
|
||||
|
||||
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"
|
||||
```js
|
||||
// bundle file
|
||||
import img from './file.png'
|
||||
```
|
||||
|
||||
By default a file is emitted, however this can be disabled if required (e.g. for server
|
||||
side packages).
|
||||
Then add the loader to your `webpack` config. For example:
|
||||
|
||||
``` 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"
|
||||
}
|
||||
```js
|
||||
// webpack.config.js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(png|jpg|gif)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Filename template placeholders
|
||||
And run `webpack` via your preferred method. This will emit `file.png` as a file
|
||||
in the output directory (with the specified naming convention, if options are
|
||||
specified to do so) and returns the public URI of the file.
|
||||
|
||||
* `[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`
|
||||
_Note: 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._
|
||||
|
||||
#### Examples
|
||||
## Options
|
||||
|
||||
``` javascript
|
||||
require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
|
||||
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js
|
||||
### `context`
|
||||
|
||||
require("file-loader?name=html-[hash:6].html!./page.html");
|
||||
// => html-109fa8.html
|
||||
Type: `String`
|
||||
Default: [`context`](https://webpack.js.org/configuration/entry-context/#context)
|
||||
|
||||
require("file-loader?name=[hash]!./flash.txt");
|
||||
// => c31e9820c001c9c4a86bce33ce43b679
|
||||
Specifies a custom file context.
|
||||
|
||||
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
|
||||
```js
|
||||
// webpack.config.js
|
||||
...
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[path][name].[ext]',
|
||||
context: ''
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
<h2 align="center">Contributing</h2>
|
||||
### `emitFile`
|
||||
|
||||
Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.
|
||||
Type: `Boolean`
|
||||
Default: `true`
|
||||
|
||||
<h2 align="center">Maintainers</h2>
|
||||
If true, emits a file (writes a file to the filesystem). If false, 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.
|
||||
|
||||
<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>
|
||||
```js
|
||||
// bundle file
|
||||
import img from './file.png'
|
||||
```
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
...
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
emitFile: false
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
<h2 align="center">LICENSE</h2>
|
||||
### `name`
|
||||
|
||||
MIT
|
||||
Type: `String|Function`
|
||||
Default: `'[hash].[ext]'`
|
||||
|
||||
Specifies a custom filename template for the target file(s) using the query
|
||||
parameter `name`. For example, to copy a file from your `context` directory into
|
||||
the output directory retaining the full directory structure, you might use:
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[path][name].[ext]'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Or using a `Function`:
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
...
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name (file) {
|
||||
if (env === 'development') {
|
||||
return '[path][name].[ext]'
|
||||
}
|
||||
|
||||
return '[hash].[ext]'
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
_Note: 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._
|
||||
|
||||
### `outputPath`
|
||||
|
||||
Type: `String|Function`
|
||||
Default: `undefined`
|
||||
|
||||
Specify a filesystem path where the target file(s) will be placed.
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
...
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[path][name].[ext]',
|
||||
outputPath: 'images/'
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### `publicPath`
|
||||
|
||||
Type: `String|Function`
|
||||
Default: [`__webpack_public_path__`](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)
|
||||
|
||||
Specifies a custom public path for the target file(s).
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
...
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[path][name].[ext]',
|
||||
publicPath: 'assets/'
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### `regExp`
|
||||
|
||||
Type: `RegExp`
|
||||
Default: `undefined`
|
||||
|
||||
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]`
|
||||
[placeholder](https://github.com/webpack-contrib/file-loader#placeholders).
|
||||
|
||||
```js
|
||||
import img from './customer01/file.png'
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
|
||||
name: '[1]-[name].[ext]'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
_Note: 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..._
|
||||
|
||||
### `useRelativePath`
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `false`
|
||||
|
||||
Specifies whether or not to generate a relative URI for each target file context.
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
useRelativePath: process.env.NODE_ENV === "production"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Placeholders
|
||||
|
||||
### `[ext]`
|
||||
|
||||
Type: `String`
|
||||
Default: `file.extname`
|
||||
|
||||
The file extension of the target file/resource.
|
||||
|
||||
### `[hash]`
|
||||
|
||||
Type: `String`
|
||||
Default: `'md5'`
|
||||
|
||||
Specifies the hash method to use for hashing the file content. See
|
||||
[Hashes](https://github.com/webpack-contrib/file-loader#hashes).
|
||||
|
||||
### `[N]`
|
||||
|
||||
Type: `String`
|
||||
Default: `undefined`
|
||||
|
||||
The n-th match obtained from matching the current file name against the regExp
|
||||
|
||||
### `[name]`
|
||||
|
||||
Type: `String`
|
||||
Default: `file.basename`
|
||||
|
||||
The basename of the file/resource.
|
||||
|
||||
### `[path]`
|
||||
|
||||
Type: `String`
|
||||
Default: `file.dirname`
|
||||
|
||||
The path of the resource relative to the webpack/config context.
|
||||
|
||||
## Hashes
|
||||
|
||||
Custom hashes can be used by specifying a hash with the following format:
|
||||
`[<hashType>:hash:<digestType>:<length>]`.
|
||||
|
||||
### `digestType`
|
||||
|
||||
Type: `String`
|
||||
Default: `'hex'`
|
||||
|
||||
The [digest](https://en.wikipedia.org/wiki/Cryptographic_hash_function) that the
|
||||
hash function should use. Valid values include: base26, base32, base36,
|
||||
base49, base52, base58, base62, base64, and hex.
|
||||
|
||||
### `hashType`
|
||||
|
||||
Type: `String`
|
||||
Default: `'md5'`
|
||||
|
||||
The type of hash that the has function should use. Valid values include: md5,
|
||||
sha1, sha256, and sha512.
|
||||
|
||||
### `length`
|
||||
|
||||
Type: `Number`
|
||||
Default: `9999`
|
||||
|
||||
Users may also specify a length for the computed hash.
|
||||
|
||||
## Examples
|
||||
|
||||
The following examples show how one might use `file-loader` and what the result
|
||||
would be.
|
||||
|
||||
```js
|
||||
// bundle file
|
||||
import png from 'image.png'
|
||||
```
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'dirname/[hash].[ext]'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
# result
|
||||
dirname/0dcbbaa701328ae351f.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[sha512:hash:base64:7].[ext]'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
# result
|
||||
gdyb21L.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
// bundle file
|
||||
import png from 'path/to/file.png'
|
||||
```
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[path][name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
# result
|
||||
path/to/file.png?e43b20c069c4a01867c31e98cbce33c9
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
Please take a moment to read our contributing guidelines if you haven't yet done so.
|
||||
|
||||
#### [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
||||
|
||||
## License
|
||||
|
||||
#### [MIT](./LICENSE)
|
||||
|
||||
[npm]: https://img.shields.io/npm/v/file-loader.svg
|
||||
[npm-url]: https://npmjs.com/package/file-loader
|
||||
@@ -146,11 +386,11 @@ MIT
|
||||
[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
|
||||
[tests]: https://img.shields.io/circleci/project/github/webpack-contrib/file-loader.svg
|
||||
[tests-url]: https://circleci.com/gh/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
|
||||
[cover]: https://codecov.io/gh/webpack-contrib/file-loader/branch/master/graph/badge.svg
|
||||
[cover-url]: https://codecov.io/gh/webpack-contrib/file-loader
|
||||
|
||||
[chat]: https://badges.gitter.im/webpack/webpack.svg
|
||||
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
||||
[chat-url]: https://gitter.im/webpack/webpack
|
||||
|
||||
Reference in New Issue
Block a user