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

Commit d699243

Browse files
alanyinjsevilebottnawi
alanyinjs
authored and
evilebottnawi
committed
docs(readme): updated single loader syntax (#316)
1 parent 5545075 commit d699243

File tree

1 file changed

+124
-76
lines changed

1 file changed

+124
-76
lines changed

‎README.md

Lines changed: 124 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,14 @@ module.exports = {
8181
rules: [
8282
{
8383
test: /\.(png|jpg|gif)$/,
84-
loader: 'file-loader',
85-
options: {
86-
name: '[path][name].[ext]',
87-
},
84+
use: [
85+
{
86+
loader: 'file-loader',
87+
options: {
88+
name: '[path][name].[ext]',
89+
},
90+
},
91+
],
8892
},
8993
],
9094
},
@@ -101,16 +105,20 @@ module.exports = {
101105
rules: [
102106
{
103107
test: /\.(png|jpg|gif)$/,
104-
loader: 'file-loader',
105-
options: {
106-
name(file) {
107-
if (process.env.NODE_ENV === 'development') {
108-
return '[path][name].[ext]';
109-
}
110-
111-
return '[hash].[ext]';
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+
}
116+
117+
return '[hash].[ext]';
118+
},
119+
},
112120
},
113-
},
121+
],
114122
},
115123
],
116124
},
@@ -136,10 +144,14 @@ module.exports = {
136144
rules: [
137145
{
138146
test: /\.(png|jpg|gif)$/,
139-
loader: 'file-loader',
140-
options: {
141-
outputPath: 'images',
142-
},
147+
use: [
148+
{
149+
loader: 'file-loader',
150+
options: {
151+
outputPath: 'images',
152+
},
153+
},
154+
],
143155
},
144156
],
145157
},
@@ -156,26 +168,30 @@ module.exports = {
156168
rules: [
157169
{
158170
test: /\.(png|jpg|gif)$/,
159-
loader: 'file-loader',
160-
options: {
161-
outputPath: (url, resourcePath, context) => {
162-
// `resourcePath` is original absolute path to asset
163-
// `context` is directory where stored asset (`rootContext`) or `context` option
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
164178

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

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

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

176-
return `output_path/${url}`;
190+
return `output_path/${url}`;
191+
},
192+
},
177193
},
178-
},
194+
],
179195
},
180196
],
181197
},
@@ -199,10 +215,14 @@ module.exports = {
199215
rules: [
200216
{
201217
test: /\.(png|jpg|gif)$/,
202-
loader: 'file-loader',
203-
options: {
204-
publicPath: 'assets',
205-
},
218+
use: [
219+
{
220+
loader: 'file-loader',
221+
options: {
222+
publicPath: 'assets',
223+
},
224+
},
225+
],
206226
},
207227
],
208228
},
@@ -219,26 +239,30 @@ module.exports = {
219239
rules: [
220240
{
221241
test: /\.(png|jpg|gif)$/,
222-
loader: 'file-loader',
223-
options: {
224-
publicPath: (url, resourcePath, context) => {
225-
// `resourcePath` is original absolute path to asset
226-
// `context` is directory where stored asset (`rootContext`) or `context` option
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
227249

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

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

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

239-
return `public_path/${url}`;
261+
return `public_path/${url}`;
262+
},
263+
},
240264
},
241-
},
265+
],
242266
},
243267
],
244268
},
@@ -258,10 +282,14 @@ module.exports = {
258282
rules: [
259283
{
260284
test: /\.(png|jpg|gif)$/,
261-
loader: 'file-loader',
262-
options: {
263-
context: 'project',
264-
},
285+
use: [
286+
{
287+
loader: 'file-loader',
288+
options: {
289+
context: 'project',
290+
},
291+
},
292+
],
265293
},
266294
],
267295
},
@@ -292,10 +320,14 @@ module.exports = {
292320
rules: [
293321
{
294322
test: /\.css$/,
295-
loader: 'file-loader',
296-
options: {
297-
emitFile: false,
298-
},
323+
use: [
324+
{
325+
loader: 'file-loader',
326+
options: {
327+
emitFile: false,
328+
},
329+
},
330+
],
299331
},
300332
],
301333
},
@@ -325,11 +357,15 @@ module.exports = {
325357
rules: [
326358
{
327359
test: /\.(png|jpg|gif)$/,
328-
loader: 'file-loader',
329-
options: {
330-
regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
331-
name: '[1]-[name].[ext]',
332-
},
360+
use: [
361+
{
362+
loader: 'file-loader',
363+
options: {
364+
regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
365+
name: '[1]-[name].[ext]',
366+
},
367+
},
368+
],
333369
},
334370
],
335371
},
@@ -446,10 +482,14 @@ module.exports = {
446482
rules: [
447483
{
448484
test: /\.(png|jpg|gif)$/,
449-
loader: 'file-loader',
450-
options: {
451-
name: 'dirname/[hash].[ext]',
452-
},
485+
use: [
486+
{
487+
loader: 'file-loader',
488+
options: {
489+
name: 'dirname/[hash].[ext]',
490+
},
491+
}
492+
],
453493
},
454494
],
455495
},
@@ -479,10 +519,14 @@ module.exports = {
479519
rules: [
480520
{
481521
test: /\.(png|jpg|gif)$/,
482-
loader: 'file-loader',
483-
options: {
484-
name: '[sha512:hash:base64:7].[ext]',
485-
},
522+
use: [
523+
{
524+
loader: 'file-loader',
525+
options: {
526+
name: '[sha512:hash:base64:7].[ext]',
527+
},
528+
},
529+
],
486530
},
487531
],
488532
},
@@ -512,10 +556,14 @@ module.exports = {
512556
rules: [
513557
{
514558
test: /\.(png|jpg|gif)$/,
515-
loader: 'file-loader',
516-
options: {
517-
name: '[path][name].[ext]?[hash]',
518-
},
559+
use: [
560+
{
561+
loader: 'file-loader',
562+
options: {
563+
name: '[path][name].[ext]?[hash]',
564+
},
565+
},
566+
],
519567
},
520568
],
521569
},

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy