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

Commit 642ee74

Browse files
evilebottnawievilebottnawi
authored
docs: improve readme (#341)
1 parent c136f44 commit 642ee74

File tree

2 files changed

+89
-103
lines changed

2 files changed

+89
-103
lines changed

‎README.md‎

Lines changed: 80 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,10 @@ module.exports = {
4141
module: {
4242
rules: [
4343
{
44-
test: /\.(png|jpe?g|gif)$/,
44+
test: /\.(png|jpe?g|gif)$/i,
4545
use: [
4646
{
4747
loader: 'file-loader',
48-
options: {},
4948
},
5049
],
5150
},
@@ -65,7 +64,7 @@ specified to do so) and returns the public URI of the file.
6564
### `name`
6665

6766
Type: `String|Function`
68-
Default: `'[hash].[ext]'`
67+
Default: `'[contenthash].[ext]'`
6968

7069
Specifies a custom filename template for the target file(s) using the query
7170
parameter `name`. For example, to emit a file from your `context` directory into
@@ -80,15 +79,11 @@ module.exports = {
8079
module: {
8180
rules: [
8281
{
83-
test: /\.(png|jpe?g|gif)$/,
84-
use: [
85-
{
86-
loader: 'file-loader',
87-
options: {
88-
name: '[path][name].[ext]',
89-
},
90-
},
91-
],
82+
test: /\.(png|jpe?g|gif)$/i,
83+
loader: 'file-loader',
84+
options: {
85+
name: '[path][name].[ext]',
86+
},
9287
},
9388
],
9489
},
@@ -104,21 +99,17 @@ module.exports = {
10499
module: {
105100
rules: [
106101
{
107-
test: /\.(png|jpe?g|gif)$/,
108-
use: [
109-
{
110-
loader: 'file-loader',
111-
options: {
112-
name(file) {
113-
if (process.env.NODE_ENV === 'development') {
114-
return '[path][name].[ext]';
115-
}
102+
test: /\.(png|jpe?g|gif)$/i,
103+
loader: 'file-loader',
104+
options: {
105+
name(file) {
106+
if (process.env.NODE_ENV === 'development') {
107+
return '[path][name].[ext]';
108+
}
116109

117-
return '[hash].[ext]';
118-
},
119-
},
110+
return '[contenthash].[ext]';
120111
},
121-
],
112+
},
122113
},
123114
],
124115
},
@@ -143,15 +134,11 @@ module.exports = {
143134
module: {
144135
rules: [
145136
{
146-
test: /\.(png|jpe?g|gif)$/,
147-
use: [
148-
{
149-
loader: 'file-loader',
150-
options: {
151-
outputPath: 'images',
152-
},
153-
},
154-
],
137+
test: /\.(png|jpe?g|gif)$/i,
138+
loader: 'file-loader',
139+
options: {
140+
outputPath: 'images',
141+
},
155142
},
156143
],
157144
},
@@ -167,31 +154,27 @@ module.exports = {
167154
module: {
168155
rules: [
169156
{
170-
test: /\.(png|jpe?g|gif)$/,
171-
use: [
172-
{
173-
loader: 'file-loader',
174-
options: {
175-
outputPath: (url, resourcePath, context) => {
176-
// `resourcePath` is original absolute path to asset
177-
// `context` is directory where stored asset (`rootContext`) or `context` option
157+
test: /\.(png|jpe?g|gif)$/i,
158+
loader: 'file-loader',
159+
options: {
160+
outputPath: (url, resourcePath, context) => {
161+
// `resourcePath` is original absolute path to asset
162+
// `context` is directory where stored asset (`rootContext`) or `context` option
178163

179-
// To get relative path you can use
180-
// const relativePath = path.relative(context, resourcePath);
164+
// To get relative path you can use
165+
// const relativePath = path.relative(context, resourcePath);
181166

182-
if (/my-custom-image\.png/.test(resourcePath)) {
183-
return `other_output_path/${url}`;
184-
}
167+
if (/my-custom-image\.png/.test(resourcePath)) {
168+
return `other_output_path/${url}`;
169+
}
185170

186-
if (/images/.test(context)) {
187-
return `image_output_path/${url}`;
188-
}
171+
if (/images/.test(context)) {
172+
return `image_output_path/${url}`;
173+
}
189174

190-
return `output_path/${url}`;
191-
},
192-
},
175+
return `output_path/${url}`;
193176
},
194-
],
177+
},
195178
},
196179
],
197180
},
@@ -214,15 +197,11 @@ module.exports = {
214197
module: {
215198
rules: [
216199
{
217-
test: /\.(png|jpe?g|gif)$/,
218-
use: [
219-
{
220-
loader: 'file-loader',
221-
options: {
222-
publicPath: 'assets',
223-
},
224-
},
225-
],
200+
test: /\.(png|jpe?g|gif)$/i,
201+
loader: 'file-loader',
202+
options: {
203+
publicPath: 'assets',
204+
},
226205
},
227206
],
228207
},
@@ -238,31 +217,27 @@ module.exports = {
238217
module: {
239218
rules: [
240219
{
241-
test: /\.(png|jpe?g|gif)$/,
242-
use: [
243-
{
244-
loader: 'file-loader',
245-
options: {
246-
publicPath: (url, resourcePath, context) => {
247-
// `resourcePath` is original absolute path to asset
248-
// `context` is directory where stored asset (`rootContext`) or `context` option
220+
test: /\.(png|jpe?g|gif)$/i,
221+
loader: 'file-loader',
222+
options: {
223+
publicPath: (url, resourcePath, context) => {
224+
// `resourcePath` is original absolute path to asset
225+
// `context` is directory where stored asset (`rootContext`) or `context` option
249226

250-
// To get relative path you can use
251-
// const relativePath = path.relative(context, resourcePath);
227+
// To get relative path you can use
228+
// const relativePath = path.relative(context, resourcePath);
252229

253-
if (/my-custom-image\.png/.test(resourcePath)) {
254-
return `other_public_path/${url}`;
255-
}
230+
if (/my-custom-image\.png/.test(resourcePath)) {
231+
return `other_public_path/${url}`;
232+
}
256233

257-
if (/images/.test(context)) {
258-
return `image_output_path/${url}`;
259-
}
234+
if (/images/.test(context)) {
235+
return `image_output_path/${url}`;
236+
}
260237

261-
return `public_path/${url}`;
262-
},
263-
},
238+
return `public_path/${url}`;
264239
},
265-
],
240+
},
266241
},
267242
],
268243
},
@@ -283,7 +258,7 @@ module.exports = {
283258
module: {
284259
rules: [
285260
{
286-
test: /\.(png|jpg|gif)$/,
261+
test: /\.(png|jpg|gif)$/i,
287262
loader: 'file-loader',
288263
options: {
289264
publicPath: '/some/path/',
@@ -307,7 +282,7 @@ module.exports = {
307282
module: {
308283
rules: [
309284
{
310-
test: /\.(png|jpe?g|gif)$/,
285+
test: /\.(png|jpe?g|gif)$/i,
311286
use: [
312287
{
313288
loader: 'file-loader',
@@ -345,7 +320,7 @@ module.exports = {
345320
module: {
346321
rules: [
347322
{
348-
test: /\.css$/,
323+
test: /\.css$/i,
349324
use: [
350325
{
351326
loader: 'file-loader',
@@ -382,12 +357,12 @@ module.exports = {
382357
module: {
383358
rules: [
384359
{
385-
test: /\.(png|jpe?g|gif)$/,
360+
test: /\.(png|jpe?g|gif)$/i,
386361
use: [
387362
{
388363
loader: 'file-loader',
389364
options: {
390-
regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
365+
regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/i,
391366
name: '[1]-[name].[ext]',
392367
},
393368
},
@@ -453,6 +428,13 @@ Default: `md5`
453428

454429
Specifies the hash method to use for hashing the file content.
455430

431+
### `[contenthash]`
432+
433+
Type: `String`
434+
Default: `md5`
435+
436+
Specifies the hash method to use for hashing the file content.
437+
456438
### `[<hashType>:hash:<digestType>:<length>]`
457439

458440
Type: `String`
@@ -492,6 +474,8 @@ The n-th match obtained from matching the current file name against the `regExp`
492474

493475
## Examples
494476

477+
### Names
478+
495479
The following examples show how one might use `file-loader` and what the result would be.
496480

497481
**file.js**
@@ -507,12 +491,12 @@ module.exports = {
507491
module: {
508492
rules: [
509493
{
510-
test: /\.(png|jpe?g|gif)$/,
494+
test: /\.(png|jpe?g|gif)$/i,
511495
use: [
512496
{
513497
loader: 'file-loader',
514498
options: {
515-
name: 'dirname/[hash].[ext]',
499+
name: 'dirname/[contenthash].[ext]',
516500
},
517501
},
518502
],
@@ -544,7 +528,7 @@ module.exports = {
544528
module: {
545529
rules: [
546530
{
547-
test: /\.(png|jpe?g|gif)$/,
531+
test: /\.(png|jpe?g|gif)$/i,
548532
use: [
549533
{
550534
loader: 'file-loader',
@@ -581,12 +565,12 @@ module.exports = {
581565
module: {
582566
rules: [
583567
{
584-
test: /\.(png|jpe?g|gif)$/,
568+
test: /\.(png|jpe?g|gif)$/i,
585569
use: [
586570
{
587571
loader: 'file-loader',
588572
options: {
589-
name: '[path][name].[ext]?[hash]',
573+
name: '[path][name].[ext]?[contenthash]',
590574
},
591575
},
592576
],
@@ -641,15 +625,13 @@ module.exports = {
641625
module: {
642626
rules: [
643627
{
644-
test: /\.(png|jpg|gif)$/,
628+
test: /\.(png|jpg|gif)$/i,
645629
loader: 'file-loader',
646630
options: {
647-
context: '',
648-
emitFile: true,
649-
name: '[name].[hash].[ext]',
631+
name: '[name].[contenthash].[ext]',
632+
outputPath: 'static/assets/',
650633
publicPath: 'static/assets/',
651634
postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
652-
outputPath: 'static/assets/',
653635
},
654636
},
655637
],

‎src/index.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,15 @@ export default function loader(content) {
1515

1616
const context = options.context || this.rootContext;
1717

18-
const url = loaderUtils.interpolateName(this, options.name, {
19-
context,
20-
content,
21-
regExp: options.regExp,
22-
});
18+
const url = loaderUtils.interpolateName(
19+
this,
20+
options.name || '[contenthash].[ext]',
21+
{
22+
context,
23+
content,
24+
regExp: options.regExp,
25+
}
26+
);
2327

2428
let outputPath = url;
2529

0 commit comments

Comments
 (0)