@@ -3,57 +3,54 @@ title: file-loader
3
3
source : https://raw.githubusercontent.com/webpack/file-loader/master/README.md
4
4
edit : https://github.com/webpack/file-loader/edit/master/README.md
5
5
---
6
- ## Install
6
+ ## 安装
7
7
8
8
``` bash
9
9
npm install --save-dev file-loader
10
10
```
11
11
12
- ## Usage
12
+ ## 用法
13
13
14
- By default the filename of the resulting file is the MD5 hash of the file's contents
15
- with the original extension of the required resource.
14
+ 默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
16
15
17
16
``` javascript
18
17
var url = require (" file-loader!./file.png" );
19
- // => emits file.png as file in the output directory and returns the public url
20
- // => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
18
+ // => 输出 file.png 文件到输出目录并返回public url
19
+ // => 即返回 "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
21
20
```
22
21
23
- By default a file is emitted, however this can be disabled if required (e.g. for server
24
- side packages).
22
+ 默认情况下,文件会被输出,不过如果需要的话,也可以不输出(比如使用了服务端的 packages)。
25
23
26
24
``` javascript
27
25
var url = require (" file-loader?emitFile=false!./file.png" );
28
- // => returns the public url but does NOT emit a file
29
- // => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
26
+ // => 返回public url 但是不输出文件
27
+ // => 即返回 "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
30
28
```
31
29
32
- #### Filename templates
30
+ #### 文件名模板
33
31
34
- 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] ` .
32
+ 你可以使用查询参数 ` name ` 为你的文件配置自定义的文件名模板。例如,从你的 ` context ` 目录复制文件到输出目录,并且保留完整的目录结构,你可以使用 ` ?name=[path][name].[ext] ` 。
35
33
36
- 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.
34
+ 默认情况下,会按照你指定的路径和文件名输出文件,且使用相同的 URL 路径来访问文件。
37
35
38
- You can specify custom output and public paths by using the ` outputPath ` and ` publicPath ` query name parameters:
36
+ 你可以使用 ` outputPath ` 和 ` publicPath ` 查询名称参数来指定自定义的输出路径和发布目录。
39
37
40
38
```
41
39
use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"
42
40
```
43
41
44
- #### Filename template placeholders
42
+ #### 文件名模板占位符
45
43
46
- * ` [ext] ` the extension of the resource
47
- * ` [name] ` the basename of the resource
48
- * ` [path] ` the path of the resource relative to the ` context ` query parameter or option.
49
- * ` [hash] ` the hash of the content, ` hex ` -encoded ` md5 ` by default
50
- * ` [<hashType>:hash:<digestType>:<length>] ` optionally you can configure
51
- * other ` hashType ` s, i. e. ` sha1 ` , ` md5 ` , ` sha256 ` , ` sha512 `
52
- * other ` digestType ` s, i. e. ` hex ` , ` base26 ` , ` base32 ` , ` base36 ` , ` base49 ` , ` base52 ` , ` base58 ` , ` base62 ` , ` base64 `
53
- * and ` length ` the length in chars
54
- * ` [N] ` the N-th match obtained from matching the current file name against the query param ` regExp `
55
-
56
- #### Examples
44
+ * ` [ext] ` 资源扩展名
45
+ * ` [name] ` 资源的基本名称
46
+ * ` [path] ` 资源相对于 ` context ` 查询参数或者配置的路径
47
+ * ` [hash] ` 内容的哈希值,默认为十六进制编码的 ` md5 `
48
+ * ` [<hashType>:hash:<digestType>:<length>] ` 可选配置
49
+ * 其他的 ` hashType ` , 即 ` sha1 ` , ` md5 ` , ` sha256 ` , ` sha512 `
50
+ * 其他的 ` digestType ` , 即 ` hex ` , ` base26 ` , ` base32 ` , ` base36 ` , ` base49 ` , ` base52 ` , ` base58 ` , ` base62 ` , ` base64 `
51
+ * ` length ` 字符的长度
52
+ * ` [N] ` 当前文件名按照查询参数 ` regExp ` 匹配后获得到第 N 个匹配结果
53
+ #### 示例
57
54
58
55
``` javascript
59
56
require (" file-loader?name=js/[hash].script.[ext]!./javascript.js" );
@@ -67,11 +64,11 @@ require("file-loader?name=[hash]!./flash.txt");
67
64
68
65
require (" file-loader?name=[sha512:hash:base64:7].[ext]!./image.png" );
69
66
// => gdyb21L.png
70
- // use sha512 hash instead of md5 and with only 7 chars of base64
67
+ // 使用 sha512 哈希值替代 md5 并且使用 base64 的 7 个字符
71
68
72
69
require (" file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg" );
73
70
// => img-VqzT5ZC.jpg
74
- // use custom name, sha512 hash instead of md5 and with only 7 chars of base64
71
+ // 使用自定义名称, sha512 哈希值替代 md5 并且使用 base64 的 7 个字符
75
72
76
73
require (" file-loader?name=picture.png!./myself.png" );
77
74
// => picture.png
@@ -80,11 +77,11 @@ require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
80
77
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9
81
78
```
82
79
83
- ## Contributing
80
+ ## 贡献
84
81
85
- Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling ` npm test ` .
82
+ 不要犹豫去创建一个pull request。所有的贡献行为都会被感谢。开发时,可以使用 ` npm test ` 来进行测试。
86
83
87
- ## Maintainers
84
+ ## 维护人员
88
85
89
86
<table >
90
87
<tbody >
0 commit comments