diff --git a/README.md b/README.md index 429adc7..d4dc1d3 100644 --- a/README.md +++ b/README.md @@ -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 { @@ -124,7 +126,7 @@ the output directory retaining the full directory structure, you might use: } ``` -Or using a `Function`: +#### `Function` ```js // webpack.config.js @@ -154,6 +156,8 @@ Default: `undefined` Specify a filesystem path where the target file(s) will be placed. +#### `String` + ```js // webpack.config.js ... @@ -167,6 +171,28 @@ 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` @@ -174,6 +200,8 @@ Default: [`__webpack_public_path__`](https://webpack.js.org/api/module-variables Specifies a custom public path for the target file(s). +#### `String` + ```js // webpack.config.js ... @@ -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` diff --git a/src/index.js b/src/index.js index a63d59e..9ddcaf1 100644 --- a/src/index.js +++ b/src/index.js @@ -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); } @@ -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 { diff --git a/test/__snapshots__/outputPath-option.test.js.snap b/test/__snapshots__/outputPath-option.test.js.snap index 4328ebe..13b79ca 100644 --- a/test/__snapshots__/outputPath-option.test.js.snap +++ b/test/__snapshots__/outputPath-option.test.js.snap @@ -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 [ diff --git a/test/__snapshots__/publicPath-option.test.js.snap b/test/__snapshots__/publicPath-option.test.js.snap index 52cc6d8..8f92bb1 100644 --- a/test/__snapshots__/publicPath-option.test.js.snap +++ b/test/__snapshots__/publicPath-option.test.js.snap @@ -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 [ diff --git a/test/outputPath-option.test.js b/test/outputPath-option.test.js index a6e565f..8998151 100644 --- a/test/outputPath-option.test.js +++ b/test/outputPath-option.test.js @@ -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; @@ -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(); + }); }); diff --git a/test/publicPath-option.test.js b/test/publicPath-option.test.js index 70e7cdc..289a75d 100644 --- a/test/publicPath-option.test.js +++ b/test/publicPath-option.test.js @@ -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(); + }); });