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

Commit cd8698b

Browse files
evilebottnawievilebottnawi
authored
feat: support the query template for the name option (#366)
1 parent 5703c58 commit cd8698b

8 files changed

Lines changed: 112 additions & 16 deletions

File tree

‎README.md‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,10 @@ module.exports = {
102102
test: /\.(png|jpe?g|gif)$/i,
103103
loader: 'file-loader',
104104
options: {
105-
name(file) {
105+
name(resourcePath, resourceQuery) {
106+
// `resourcePath` - `/absolute/path/to/file.js`
107+
// `resourceQuery` - `?foo=bar`
108+
106109
if (process.env.NODE_ENV === 'development') {
107110
return '[path][name].[ext]';
108111
}
@@ -439,6 +442,13 @@ Default: `file.folder`
439442

440443
The folder of the resource is in.
441444

445+
### `[query]`
446+
447+
Type: `String`
448+
Default: `file.query`
449+
450+
The query of the resource, i.e. `?foo=bar`.
451+
442452
### `[emoji]`
443453

444454
Type: `String`
@@ -619,14 +629,55 @@ Result:
619629
path/to/file.png?e43b20c069c4a01867c31e98cbce33c9
620630
```
621631

632+
### CDN
633+
634+
The following examples show how to use `file-loader` for CDN uses query params.
635+
636+
**file.js**
637+
638+
```js
639+
import png from './directory/image.png?width=300&height=300';
640+
```
641+
642+
**webpack.config.js**
643+
644+
```js
645+
module.exports = {
646+
output: {
647+
publicPath: 'https://cdn.example.com/',
648+
},
649+
module: {
650+
rules: [
651+
{
652+
test: /\.(png|jpe?g|gif)$/i,
653+
use: [
654+
{
655+
loader: 'file-loader',
656+
options: {
657+
name: '[path][name].[ext][query]',
658+
},
659+
},
660+
],
661+
},
662+
],
663+
},
664+
};
665+
```
666+
667+
Result:
668+
669+
```bash
670+
# result
671+
https://cdn.example.com/directory/image.png?width=300&height=300
672+
```
673+
622674
### Dynamic public path depending on environment variable at run time
623675

624676
An application might want to configure different CDN hosts depending on an environment variable that is only available when running the application. This can be an advantage, as only one build of the application is necessary, which behaves differntly depending on environment variables of the deployment environment. Since file-loader is applied when compiling the application, and not when running it, the environment variable cannot be used in the file-loader configuration. A way around this is setting the `__webpack_public_path__` to the desired CDN host depending on the environment variable at the entrypoint of the application. The option `postTransformPublicPath` can be used to configure a custom path depending on a variable like `__webpack_public_path__`.
625677

626678
**main.js**
627679

628680
```js
629-
const namespace = process.env.NAMESPACE;
630681
const assetPrefixForNamespace = (namespace) => {
631682
switch (namespace) {
632683
case 'prod':
@@ -641,6 +692,8 @@ const assetPrefixForNamespace = (namespace) => {
641692
return '';
642693
}
643694
};
695+
const namespace = process.env.NAMESPACE;
696+
644697
__webpack_public_path__ = `${assetPrefixForNamespace(namespace)}/`;
645698
```
646699

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"webpack": "^4.0.0 || ^5.0.0"
4242
},
4343
"dependencies": {
44-
"loader-utils": "^1.2.3",
44+
"loader-utils": "^1.4.0",
4545
"schema-utils": "^2.5.0"
4646
},
4747
"devDependencies": {

‎test/__snapshots__/name-option.test.js.snap‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`"name" option should work for CDN support query params: errors 1`] = `Array []`;
4+
5+
exports[`"name" option should work for CDN support query params: result 1`] = `"https://cdn.example.com/nested/file.png?foo=bar"`;
6+
7+
exports[`"name" option should work for CDN support query params: warnings 1`] = `Array []`;
8+
39
exports[`"name" option should work with "Function" value: errors 1`] = `Array []`;
410

5-
exports[`"name" option should work with "Function" value: result 1`] = `"9c87cbf3ba33126ffd25ae7f2f6bbafb.function.png"`;
11+
exports[`"name" option should work with "Function" value: result 1`] = `"9c87cbf3ba33126ffd25ae7f2f6bbafb.function.png?foo=bar"`;
612

713
exports[`"name" option should work with "Function" value: warnings 1`] = `Array []`;
814

915
exports[`"name" option should work with "String" value: errors 1`] = `Array []`;
1016

11-
exports[`"name" option should work with "String" value: result 1`] = `"9c87cbf3ba33126ffd25ae7f2f6bbafb.string.png"`;
17+
exports[`"name" option should work with "String" value: result 1`] = `"9c87cbf3ba33126ffd25ae7f2f6bbafb.string.png?foo=bar"`;
1218

1319
exports[`"name" option should work with "String" value: warnings 1`] = `Array []`;
1420

‎test/fixtures/cdn.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* eslint-disable */
2+
import png from './nested/file.png?foo=bar#hash';
3+
4+
__export__ = png;
5+
6+
export default png;

‎test/fixtures/nested/file.png‎

6.62 KB
Loading

‎test/fixtures/simple.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable */
2-
import png from './file.png';
2+
import png from './file.png?foo=bar';
33

44
__export__ = png;
55

‎test/name-option.test.js‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import path from 'path';
2+
13
import {
24
compile,
35
execute,
@@ -22,7 +24,7 @@ describe('"name" option', () => {
2224

2325
it('should work with "String" value', async () => {
2426
const compiler = getCompiler('simple.js', {
25-
name: '[hash].string.[ext]',
27+
name: '[hash].string.[ext][query]',
2628
});
2729
const stats = await compile(compiler);
2830

@@ -37,8 +39,11 @@ describe('"name" option', () => {
3739

3840
it('should work with "Function" value', async () => {
3941
const compiler = getCompiler('simple.js', {
40-
name() {
41-
return '[hash].function.[ext]';
42+
name(resourcePath, resourceQuery) {
43+
expect(resourcePath).toBeDefined();
44+
expect(resourceQuery).toBeDefined();
45+
46+
return '[hash].function.[ext][query]';
4247
},
4348
});
4449
const stats = await compile(compiler);
@@ -51,4 +56,30 @@ describe('"name" option', () => {
5156
);
5257
expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
5358
});
59+
60+
it('should work for CDN support query params', async () => {
61+
const compiler = getCompiler(
62+
'cdn.js',
63+
{
64+
name: '[path][name].[ext][query]',
65+
},
66+
{
67+
output: {
68+
path: path.resolve(__dirname, './outputs'),
69+
publicPath: 'https://cdn.example.com/',
70+
filename: '[name].bundle.js',
71+
chunkFilename: '[name].chunk.js',
72+
},
73+
}
74+
);
75+
const stats = await compile(compiler);
76+
77+
expect(
78+
execute(readAsset('main.bundle.js', compiler, stats))
79+
).toMatchSnapshot('result');
80+
expect(normalizeErrors(stats.compilation.warnings)).toMatchSnapshot(
81+
'warnings'
82+
);
83+
expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
84+
});
5485
});

0 commit comments

Comments
 (0)