From fa6f15bc51290c6ae224ec8c7b5f1df0f7ef9637 Mon Sep 17 00:00:00 2001 From: Fabian Ehrentraud Date: Wed, 12 Jun 2019 08:36:44 +0200 Subject: [PATCH 1/7] feat: added option "prefixPublicPathWithWebpackPublicPath" when the option is active, and a publicPath is set, it will prefix the provided publicPath with the dynamic __webpack_public_path__ --- src/index.js | 4 ++++ src/options.json | 3 +++ 2 files changed, 7 insertions(+) diff --git a/src/index.js b/src/index.js index 629a3cb..ff3a3ad 100644 --- a/src/index.js +++ b/src/index.js @@ -45,6 +45,10 @@ export default function loader(content) { } publicPath = JSON.stringify(publicPath); + + if (options.prefixPublicPathWithWebpackPublicPath) { + publicPath = `__webpack_public_path__ + ${publicPath}`; + } } if (typeof options.emitFile === 'undefined' || options.emitFile) { diff --git a/src/options.json b/src/options.json index 262f16a..2283358 100644 --- a/src/options.json +++ b/src/options.json @@ -34,6 +34,9 @@ } ] }, + "prefixPublicPathWithWebpackPublicPath": { + "type": "boolean" + }, "context": { "description": "A custom file context (https://github.com/webpack-contrib/file-loader#context).", "type": "string" From e776945f8db0da6626955f2b33ca03131275a48f Mon Sep 17 00:00:00 2001 From: Fabian Ehrentraud Date: Wed, 12 Jun 2019 08:45:05 +0200 Subject: [PATCH 2/7] feat: added unit tests added unit tests for option "prefixPublicPathWithWebpackPublicPath" --- .../publicPath-option.test.js.snap | 54 ++++++++ test/publicPath-option.test.js | 121 ++++++++++++++++++ 2 files changed, 175 insertions(+) diff --git a/test/__snapshots__/publicPath-option.test.js.snap b/test/__snapshots__/publicPath-option.test.js.snap index 676eeba..d39e529 100644 --- a/test/__snapshots__/publicPath-option.test.js.snap +++ b/test/__snapshots__/publicPath-option.test.js.snap @@ -1,5 +1,59 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{Function}\` value 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{Function}\` value and pass \`context\` 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{Function}\` value and pass \`resourcePath\` 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{String}\` value 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{String}\` value as URL 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"https://cdn.com/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{String}\` value without trailing slash 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + exports[`when applied with \`publicPath\` option matches snapshot for \`{Function}\` value 1`] = ` Object { "assets": Array [ diff --git a/test/publicPath-option.test.js b/test/publicPath-option.test.js index 6980fb2..01e7616 100644 --- a/test/publicPath-option.test.js +++ b/test/publicPath-option.test.js @@ -127,3 +127,124 @@ describe('when applied with `publicPath` option', () => { expect({ assets, source }).toMatchSnapshot(); }); }); + +describe('when applied with `publicPath` and `prefixPublicPathWithWebpackPublicPath` options', () => { + it('matches snapshot for `{String}` value', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + prefixPublicPathWithWebpackPublicPath: true, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for `{String}` value without trailing slash', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path', + prefixPublicPathWithWebpackPublicPath: true, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + // notice that this case will produce invalid urls if __webpack_public_path__ is set to an absolute url + it('matches snapshot for `{String}` value as URL', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'https://cdn.com/', + prefixPublicPathWithWebpackPublicPath: true, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for `{Function}` value', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath(url) { + return `public_path/${url}`; + }, + prefixPublicPathWithWebpackPublicPath: true, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + 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}`; + }, + prefixPublicPathWithWebpackPublicPath: true, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for `{Function}` value and pass `context`', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath(url, resourcePath, context) { + expect(context).toMatch('fixtures'); + + return `public_path/${url}`; + }, + prefixPublicPathWithWebpackPublicPath: true, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); +}); From 4f990d7bee2d64b2d22b17095415809cf5baa9d4 Mon Sep 17 00:00:00 2001 From: Fabian Ehrentraud Date: Fri, 19 Jul 2019 08:50:53 +0200 Subject: [PATCH 3/7] feat: introduced "postTransformPublicPath" option removed prefixPublicPathWithWebpackPublicPath and introduced postTransformPublicPath option instead --- src/index.js | 6 +- src/options.json | 4 +- .../publicPath-option.test.js.snap | 47 +++- test/publicPath-option.test.js | 201 +++++++++++------- 4 files changed, 168 insertions(+), 90 deletions(-) diff --git a/src/index.js b/src/index.js index ff3a3ad..b9d8a32 100644 --- a/src/index.js +++ b/src/index.js @@ -45,10 +45,10 @@ export default function loader(content) { } publicPath = JSON.stringify(publicPath); + } - if (options.prefixPublicPathWithWebpackPublicPath) { - publicPath = `__webpack_public_path__ + ${publicPath}`; - } + if (options.postTransformPublicPath) { + publicPath = options.postTransformPublicPath(publicPath); } if (typeof options.emitFile === 'undefined' || options.emitFile) { diff --git a/src/options.json b/src/options.json index 2283358..e1df6fc 100644 --- a/src/options.json +++ b/src/options.json @@ -34,8 +34,8 @@ } ] }, - "prefixPublicPathWithWebpackPublicPath": { - "type": "boolean" + "postTransformPublicPath": { + "instanceof": "Function" }, "context": { "description": "A custom file context (https://github.com/webpack-contrib/file-loader#context).", diff --git a/test/__snapshots__/publicPath-option.test.js.snap b/test/__snapshots__/publicPath-option.test.js.snap index d39e529..8de4858 100644 --- a/test/__snapshots__/publicPath-option.test.js.snap +++ b/test/__snapshots__/publicPath-option.test.js.snap @@ -1,33 +1,33 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{Function}\` value 1`] = ` +exports[`when applied with \`postTransformPublicPath\` option matches snapshot for appending to input parameter value 1`] = ` Object { "assets": Array [ "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", ], - "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", + "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"/test\\";", } `; -exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{Function}\` value and pass \`context\` 1`] = ` +exports[`when applied with \`postTransformPublicPath\` option matches snapshot for returned input parameter value without modification 1`] = ` Object { "assets": Array [ "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", ], - "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", + "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", } `; -exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{Function}\` value and pass \`resourcePath\` 1`] = ` +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for appending to input parameter value 1`] = ` Object { "assets": Array [ "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", ], - "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", + "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"?test=test\\";", } `; -exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{String}\` value 1`] = ` +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for prefixing with __webpack_public_path__ 1`] = ` Object { "assets": Array [ "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", @@ -36,16 +36,34 @@ Object { } `; -exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{String}\` value as URL 1`] = ` +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for prefixing with string 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = \\"path_prefix/\\" + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for returned input parameter value without modification 1`] = ` Object { "assets": Array [ "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", ], - "source": "module.exports = __webpack_public_path__ + \\"https://cdn.com/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", + "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", } `; -exports[`when applied with \`publicPath\` and \`prefixPublicPathWithWebpackPublicPath\` options matches snapshot for \`{String}\` value without trailing slash 1`] = ` +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for appending to input parameter value 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"?test=test\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for prefixing with __webpack_public_path__ 1`] = ` Object { "assets": Array [ "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", @@ -54,6 +72,15 @@ Object { } `; +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for returned input parameter value without modification 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + exports[`when applied with \`publicPath\` option matches snapshot for \`{Function}\` value 1`] = ` Object { "assets": Array [ diff --git a/test/publicPath-option.test.js b/test/publicPath-option.test.js index 01e7616..44ecbe1 100644 --- a/test/publicPath-option.test.js +++ b/test/publicPath-option.test.js @@ -128,14 +128,13 @@ describe('when applied with `publicPath` option', () => { }); }); -describe('when applied with `publicPath` and `prefixPublicPathWithWebpackPublicPath` options', () => { - it('matches snapshot for `{String}` value', async () => { +describe('when applied with `postTransformPublicPath` option', () => { + it('matches snapshot for returned input parameter value without modification', async () => { const config = { loader: { test: /(png|jpg|svg)/, options: { - publicPath: 'public_path/', - prefixPublicPathWithWebpackPublicPath: true, + postTransformPublicPath: (p) => p, }, }, }; @@ -147,13 +146,12 @@ describe('when applied with `publicPath` and `prefixPublicPathWithWebpackPublicP expect({ assets, source }).toMatchSnapshot(); }); - it('matches snapshot for `{String}` value without trailing slash', async () => { + it('matches snapshot for appending to input parameter value', async () => { const config = { loader: { test: /(png|jpg|svg)/, options: { - publicPath: 'public_path', - prefixPublicPathWithWebpackPublicPath: true, + postTransformPublicPath: (p) => `${p} + "/test"`, }, }, }; @@ -164,87 +162,140 @@ describe('when applied with `publicPath` and `prefixPublicPathWithWebpackPublicP expect({ assets, source }).toMatchSnapshot(); }); +}); - // notice that this case will produce invalid urls if __webpack_public_path__ is set to an absolute url - it('matches snapshot for `{String}` value as URL', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath: 'https://cdn.com/', - prefixPublicPathWithWebpackPublicPath: true, +describe('when applied with `publicPath` and `postTransformPublicPath` option', () => { + describe('`{String}` value', () => { + it('matches snapshot for returned input parameter value without modification', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => p, + }, }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - - it('matches snapshot for `{Function}` value', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath(url) { - return `public_path/${url}`; + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for appending to input parameter value', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => `${p} + "?test=test"`, }, - prefixPublicPathWithWebpackPublicPath: true, }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - 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(); + }); + + it('matches snapshot for prefixing with __webpack_public_path__', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`, }, - prefixPublicPathWithWebpackPublicPath: true, }, - }, - }; + }; - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; - expect({ assets, source }).toMatchSnapshot(); + expect({ assets, source }).toMatchSnapshot(); + }); }); - it('matches snapshot for `{Function}` value and pass `context`', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath(url, resourcePath, context) { - expect(context).toMatch('fixtures'); - - return `public_path/${url}`; + describe('`{Function}` value', () => { + it('matches snapshot for returned input parameter value without modification', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath(url) { + return `public_path/${url}`; + }, + postTransformPublicPath: (p) => p, }, - prefixPublicPathWithWebpackPublicPath: true, }, - }, - }; + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for appending to input parameter value', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath(url) { + return `public_path/${url}`; + }, + postTransformPublicPath: (p) => `${p} + "?test=test"`, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for prefixing with string', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => `"path_prefix/" + ${p}`, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for prefixing with __webpack_public_path__', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`, + }, + }, + }; - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; - expect({ assets, source }).toMatchSnapshot(); + expect({ assets, source }).toMatchSnapshot(); + }); }); }); From 584f7d9aab840b516cb25ba9813ee74b7fc58ad7 Mon Sep 17 00:00:00 2001 From: Fabian Ehrentraud Date: Sat, 20 Jul 2019 08:16:17 +0200 Subject: [PATCH 4/7] feat: moved postTransformPublicPath tests to own file --- ...ostTransformPublicPath-option.test.js.snap | 82 +++++++++ .../publicPath-option.test.js.snap | 81 -------- test/postTransformPublicPath-option.test.js | 173 ++++++++++++++++++ test/publicPath-option.test.js | 172 ----------------- 4 files changed, 255 insertions(+), 253 deletions(-) create mode 100644 test/__snapshots__/postTransformPublicPath-option.test.js.snap create mode 100644 test/postTransformPublicPath-option.test.js diff --git a/test/__snapshots__/postTransformPublicPath-option.test.js.snap b/test/__snapshots__/postTransformPublicPath-option.test.js.snap new file mode 100644 index 0000000..17e1e99 --- /dev/null +++ b/test/__snapshots__/postTransformPublicPath-option.test.js.snap @@ -0,0 +1,82 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`when applied with \`postTransformPublicPath\` option matches snapshot for appending to input parameter value 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"/test\\";", +} +`; + +exports[`when applied with \`postTransformPublicPath\` option matches snapshot for returned input parameter value without modification 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for appending to input parameter value 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"?test=test\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for prefixing with __webpack_public_path__ 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for prefixing with string 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = \\"path_prefix/\\" + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for returned input parameter value without modification 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for appending to input parameter value 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"?test=test\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for prefixing with __webpack_public_path__ 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; + +exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for returned input parameter value without modification 1`] = ` +Object { + "assets": Array [ + "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", + ], + "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", +} +`; diff --git a/test/__snapshots__/publicPath-option.test.js.snap b/test/__snapshots__/publicPath-option.test.js.snap index 8de4858..676eeba 100644 --- a/test/__snapshots__/publicPath-option.test.js.snap +++ b/test/__snapshots__/publicPath-option.test.js.snap @@ -1,86 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`when applied with \`postTransformPublicPath\` option matches snapshot for appending to input parameter value 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"/test\\";", -} -`; - -exports[`when applied with \`postTransformPublicPath\` option matches snapshot for returned input parameter value without modification 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", -} -`; - -exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for appending to input parameter value 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"?test=test\\";", -} -`; - -exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for prefixing with __webpack_public_path__ 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", -} -`; - -exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for prefixing with string 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = \\"path_prefix/\\" + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", -} -`; - -exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{Function}\` value matches snapshot for returned input parameter value without modification 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", -} -`; - -exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for appending to input parameter value 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\" + \\"?test=test\\";", -} -`; - -exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for prefixing with __webpack_public_path__ 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = __webpack_public_path__ + \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", -} -`; - -exports[`when applied with \`publicPath\` and \`postTransformPublicPath\` option \`{String}\` value matches snapshot for returned input parameter value without modification 1`] = ` -Object { - "assets": Array [ - "9c87cbf3ba33126ffd25ae7f2f6bbafb.png", - ], - "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";", -} -`; - exports[`when applied with \`publicPath\` option matches snapshot for \`{Function}\` value 1`] = ` Object { "assets": Array [ diff --git a/test/postTransformPublicPath-option.test.js b/test/postTransformPublicPath-option.test.js new file mode 100644 index 0000000..d673e02 --- /dev/null +++ b/test/postTransformPublicPath-option.test.js @@ -0,0 +1,173 @@ +import webpack from './helpers/compiler'; + +describe('when applied with `postTransformPublicPath` option', () => { + it('matches snapshot for returned input parameter value without modification', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + postTransformPublicPath: (p) => p, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for appending to input parameter value', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + postTransformPublicPath: (p) => `${p} + "/test"`, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); +}); + +describe('when applied with `publicPath` and `postTransformPublicPath` option', () => { + describe('`{String}` value', () => { + it('matches snapshot for returned input parameter value without modification', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => p, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for appending to input parameter value', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => `${p} + "?test=test"`, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for prefixing with __webpack_public_path__', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + }); + + describe('`{Function}` value', () => { + it('matches snapshot for returned input parameter value without modification', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath(url) { + return `public_path/${url}`; + }, + postTransformPublicPath: (p) => p, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for appending to input parameter value', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath(url) { + return `public_path/${url}`; + }, + postTransformPublicPath: (p) => `${p} + "?test=test"`, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for prefixing with string', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => `"path_prefix/" + ${p}`, + }, + }, + }; + + const stats = await webpack('fixture.js', config); + const [module] = stats.toJson().modules; + const { assets, source } = module; + + expect({ assets, source }).toMatchSnapshot(); + }); + + it('matches snapshot for prefixing with __webpack_public_path__', async () => { + const config = { + loader: { + test: /(png|jpg|svg)/, + options: { + publicPath: 'public_path/', + postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`, + }, + }, + }; + + 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 44ecbe1..6980fb2 100644 --- a/test/publicPath-option.test.js +++ b/test/publicPath-option.test.js @@ -127,175 +127,3 @@ describe('when applied with `publicPath` option', () => { expect({ assets, source }).toMatchSnapshot(); }); }); - -describe('when applied with `postTransformPublicPath` option', () => { - it('matches snapshot for returned input parameter value without modification', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - postTransformPublicPath: (p) => p, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - - it('matches snapshot for appending to input parameter value', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - postTransformPublicPath: (p) => `${p} + "/test"`, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); -}); - -describe('when applied with `publicPath` and `postTransformPublicPath` option', () => { - describe('`{String}` value', () => { - it('matches snapshot for returned input parameter value without modification', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath: 'public_path/', - postTransformPublicPath: (p) => p, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - - it('matches snapshot for appending to input parameter value', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath: 'public_path/', - postTransformPublicPath: (p) => `${p} + "?test=test"`, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - - it('matches snapshot for prefixing with __webpack_public_path__', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath: 'public_path/', - postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - }); - - describe('`{Function}` value', () => { - it('matches snapshot for returned input parameter value without modification', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath(url) { - return `public_path/${url}`; - }, - postTransformPublicPath: (p) => p, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - - it('matches snapshot for appending to input parameter value', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath(url) { - return `public_path/${url}`; - }, - postTransformPublicPath: (p) => `${p} + "?test=test"`, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - - it('matches snapshot for prefixing with string', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath: 'public_path/', - postTransformPublicPath: (p) => `"path_prefix/" + ${p}`, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - - it('matches snapshot for prefixing with __webpack_public_path__', async () => { - const config = { - loader: { - test: /(png|jpg|svg)/, - options: { - publicPath: 'public_path/', - postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`, - }, - }, - }; - - const stats = await webpack('fixture.js', config); - const [module] = stats.toJson().modules; - const { assets, source } = module; - - expect({ assets, source }).toMatchSnapshot(); - }); - }); -}); From 64f2eb60c3d3cb6194af105c66f0e907d9a60eaa Mon Sep 17 00:00:00 2001 From: Fabian Ehrentraud Date: Sat, 20 Jul 2019 08:26:19 +0200 Subject: [PATCH 5/7] feat: added documentation for the postTransformPublicPath option --- README.md | 26 ++++++++++++++++++++++++++ src/options.json | 1 + 2 files changed, 27 insertions(+) diff --git a/README.md b/README.md index c93f2f1..b2124e6 100644 --- a/README.md +++ b/README.md @@ -269,6 +269,32 @@ module.exports = { }; ``` +### `postTransformPublicPath` + +Type: `Function` +Default: `undefined` + +Specifies a custom function to post-process the generated public path. This can be used to prepend or append dynamic global variables that are only available at runtime, like `__webpack_public_path__`. This would not be possible with just `publicPath`, since it stringifies the values. + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + { + test: /\.(png|jpg|gif)$/, + loader: 'file-loader', + options: { + publicPath: '/some/path/', + postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`, + }, + }, + ], + }, +}; +``` + ### `context` Type: `String` diff --git a/src/options.json b/src/options.json index e1df6fc..7ab6184 100644 --- a/src/options.json +++ b/src/options.json @@ -35,6 +35,7 @@ ] }, "postTransformPublicPath": { + "description": "A custom transformation function for post-processing the publicPath (https://github.com/webpack-contrib/file-loader#posttransformpublicpath).", "instanceof": "Function" }, "context": { From 460127db553624d14b6af3664986fd41d02082e0 Mon Sep 17 00:00:00 2001 From: Fabian Ehrentraud Date: Tue, 23 Jul 2019 08:47:40 +0200 Subject: [PATCH 6/7] feat: added example for the postTransformPublicPath option --- README.md | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/README.md b/README.md index b2124e6..efa9799 100644 --- a/README.md +++ b/README.md @@ -603,6 +603,72 @@ Result: path/to/file.png?e43b20c069c4a01867c31e98cbce33c9 ``` +--- + +**main.js** + +```js +const namespace = process.env.NAMESPACE; +const assetPrefixForNamespace = (namespace) => { + switch (namespace) { + case 'prod': + return 'https://cache.myserver.net/web'; + case 'uat': + return 'https://cache-uat.myserver.net/web'; + case 'st': + return 'https://cache-st.myserver.net/web'; + case 'dev': + return 'https://cache-dev.myserver.net/web'; + default: + return ''; + } +}; +__webpack_public_path__ = `${assetPrefixForNamespace(namespace)}/`; +``` + +**file.js** + +```js +import png from './image.png'; +``` + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + { + test: /\.(png|jpg|gif)$/, + loader: 'file-loader', + options: { + context: '', + emitFile: true, + name: '[name].[hash].[ext]', + publicPath: 'static/assets/', + postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`, + outputPath: 'static/assets/', + }, + }, + ], + }, +}; +``` + +Result when run with `NAMESPACE=prod` env variable: + +```bash +# result +https://cache.myserver.net/web/static/assets/image.somehash.png +``` + +Result when run with `NAMESPACE=dev` env variable: + +```bash +# result +https://cache-dev.myserver.net/web/static/assets/image.somehash.png +``` + ## Contributing Please take a moment to read our contributing guidelines if you haven't yet done so. From 1bc97dc0fec04662619793fc55aca0cd1c7293a9 Mon Sep 17 00:00:00 2001 From: fabb <153960+fabb@users.noreply.github.com> Date: Wed, 24 Jul 2019 12:54:16 +0200 Subject: [PATCH 7/7] feat: added some description for the postTransformPublicPath example --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index efa9799..1a13de0 100644 --- a/README.md +++ b/README.md @@ -603,7 +603,9 @@ Result: path/to/file.png?e43b20c069c4a01867c31e98cbce33c9 ``` ---- +### Dynamic public path depending on environment variable at run time + +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__`. **main.js**