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

feat: resourcePath is now available in outputPath and publicPath #304

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 51 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,8 @@ 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:

#### `String`

```js
// webpack.config.js
{
Expand All @@ -124,7 +126,7 @@ the output directory retaining the full directory structure, you might use:
}
```

Or using a `Function`:
#### `Function`

```js
// webpack.config.js
Expand Down Expand Up @@ -154,6 +156,8 @@ Default: `undefined`

Specify a filesystem path where the target file(s) will be placed.

#### `String`

```js
// webpack.config.js
...
Expand All @@ -167,13 +171,37 @@ Specify a filesystem path where the target file(s) will be placed.
...
```

#### `Function`

```js
// webpack.config.js
...
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: (url, resourcePath) => {
// `resourcePath` is original absolute path to asset
if (/my-custom-image\.png/.test(resourcePath)) {
return `other_output_path/${url}`
}

return `output_path/${url}`;
},
}
}
...
```

### `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).

#### `String`

```js
// webpack.config.js
...
Expand All @@ -187,6 +215,28 @@ Specifies a custom public path for the target file(s).
...
```

#### `Function`

```js
// webpack.config.js
...
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: (url, resourcePath) {
// `resourcePath` is original absolute path to asset
if (/my-custom-image\.png/.test(resourcePath)) {
return `other_public_path/${url}`
}

return `public_path/${url}`;
}
}
}
...
```

### `regExp`

Type: `RegExp`
Expand Down
4 changes: 2 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function loader(content) {

if (options.outputPath) {
if (typeof options.outputPath === 'function') {
outputPath = options.outputPath(url);
outputPath = options.outputPath(url, this.resourcePath);
} else {
outputPath = path.posix.join(options.outputPath, url);
}
Expand Down Expand Up @@ -55,7 +55,7 @@ export default function loader(content) {

if (options.publicPath) {
if (typeof options.publicPath === 'function') {
publicPath = options.publicPath(url);
publicPath = options.publicPath(url, this.resourcePath);
} else if (options.publicPath.endsWith('/')) {
publicPath = options.publicPath + url;
} else {
Expand Down
9 changes: 9 additions & 0 deletions test/__snapshots__/outputPath-option.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@ Object {
}
`;

exports[`when applied with \`outputPath\` option matches snapshot for \`{Function}\` value and pass \`resourcePath\` 1`] = `
Object {
"assets": Array [
"output_path_func/9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
],
"source": "module.exports = __webpack_public_path__ + \\"output_path_func/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
}
`;

exports[`when applied with \`outputPath\` option matches snapshot for \`{Function}\` value with \`options.name\` 1`] = `
Object {
"assets": Array [
Expand Down
9 changes: 9 additions & 0 deletions test/__snapshots__/publicPath-option.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@ Object {
}
`;

exports[`when applied with \`publicPath\` option matches snapshot for \`{Function}\` value and pass \`resourcePath\` 1`] = `
Object {
"assets": Array [
"9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
],
"source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
}
`;

exports[`when applied with \`publicPath\` option matches snapshot for \`{String}\` value 1`] = `
Object {
"assets": Array [
Expand Down
23 changes: 22 additions & 1 deletion test/outputPath-option.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ describe('when applied with `outputPath` option', () => {
},
};

const stats = await webpack('fixture.js', config);
const stats = await webpack('nested/fixture.js', config);
const [module] = stats.toJson().modules;
const { assets, source } = module;

Expand Down Expand Up @@ -189,4 +189,25 @@ describe('when applied with `outputPath` option', () => {

expect({ assets, source }).toMatchSnapshot();
});

it('matches snapshot for `{Function}` value and pass `resourcePath`', async () => {
const config = {
loader: {
test: /(png|jpg|svg)/,
options: {
outputPath(url, resourcePath) {
expect(resourcePath).toMatch('file.png');

return `output_path_func/${url}`;
},
},
},
};

const stats = await webpack('fixture.js', config);
const [module] = stats.toJson().modules;
const { assets, source } = module;

expect({ assets, source }).toMatchSnapshot();
});
});
21 changes: 21 additions & 0 deletions test/publicPath-option.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,25 @@ describe('when applied with `publicPath` option', () => {

expect({ assets, source }).toMatchSnapshot();
});

it('matches snapshot for `{Function}` value and pass `resourcePath`', async () => {
const config = {
loader: {
test: /(png|jpg|svg)/,
options: {
publicPath(url, resourcePath) {
expect(resourcePath).toMatch('file.png');

return `public_path/${url}`;
},
},
},
};

const stats = await webpack('fixture.js', config);
const [module] = stats.toJson().modules;
const { assets, source } = module;

expect({ assets, source }).toMatchSnapshot();
});
});