diff --git a/README.md b/README.md index b595781..37fb15d 100644 --- a/README.md +++ b/README.md @@ -197,52 +197,66 @@ In loader context `[hash]` and `[contenthash]` are the same, but we recommend us Examples ``` javascript -// loaderContext.resourcePath = "/app/js/javascript.js" +// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js" loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... }); // => js/9473fdd0d880a43c21b7778d34872157.script.js -// loaderContext.resourcePath = "/app/js/javascript.js" +// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js" // loaderContext.resourceQuery = "?foo=bar" loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext][query]", { content: ... }); // => js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar -// loaderContext.resourcePath = "/app/js/javascript.js" +// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js" loaderUtils.interpolateName(loaderContext, "js/[contenthash].script.[ext]", { content: ... }); // => js/9473fdd0d880a43c21b7778d34872157.script.js -// loaderContext.resourcePath = "/app/page.html" +// loaderContext.resourcePath = "/absolute/path/to/app/page.html" loaderUtils.interpolateName(loaderContext, "html-[hash:6].html", { content: ... }); // => html-9473fd.html -// loaderContext.resourcePath = "/app/flash.txt" +// loaderContext.resourcePath = "/absolute/path/to/app/flash.txt" loaderUtils.interpolateName(loaderContext, "[hash]", { content: ... }); // => c31e9820c001c9c4a86bce33ce43b679 -// loaderContext.resourcePath = "/app/img/image.gif" +// loaderContext.resourcePath = "/absolute/path/to/app/img/image.gif" loaderUtils.interpolateName(loaderContext, "[emoji]", { content: ... }); // => 👍 -// loaderContext.resourcePath = "/app/img/image.gif" +// loaderContext.resourcePath = "/absolute/path/to/app/img/image.gif" loaderUtils.interpolateName(loaderContext, "[emoji:4]", { content: ... }); // => 🙍🏢📤🐝 -// loaderContext.resourcePath = "/app/img/image.png" +// loaderContext.resourcePath = "/absolute/path/to/app/img/image.png" loaderUtils.interpolateName(loaderContext, "[sha512:hash:base64:7].[ext]", { content: ... }); // => 2BKDTjl.png // use sha512 hash instead of md5 and with only 7 chars of base64 -// loaderContext.resourcePath = "/app/img/myself.png" +// loaderContext.resourcePath = "/absolute/path/to/app/img/myself.png" // loaderContext.query.name = loaderUtils.interpolateName(loaderContext, "picture.png"); // => picture.png -// loaderContext.resourcePath = "/app/dir/file.png" +// loaderContext.resourcePath = "/absolute/path/to/app/dir/file.png" loaderUtils.interpolateName(loaderContext, "[path][name].[ext]?[hash]", { content: ... }); // => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157 -// loaderContext.resourcePath = "/app/js/page-home.js" +// loaderContext.resourcePath = "/absolute/path/to/app/js/page-home.js" loaderUtils.interpolateName(loaderContext, "script-[1].[ext]", { regExp: "page-(.*)\\.js", content: ... }); // => script-home.js + +// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js" +// loaderContext.resourceQuery = "?foo=bar" +loaderUtils.interpolateName( + loaderContext, + (resourcePath, resourceQuery) => { + // resourcePath - `/app/js/javascript.js` + // resourceQuery - `?foo=bar` + + return "js/[hash].script.[ext]"; + }, + { content: ... } +); +// => js/9473fdd0d880a43c21b7778d34872157.script.js ``` ### `getHashDigest` diff --git a/lib/interpolateName.js b/lib/interpolateName.js index 96cb7ac..6a13a36 100644 --- a/lib/interpolateName.js +++ b/lib/interpolateName.js @@ -38,8 +38,14 @@ function encodeStringToEmoji(content, length) { function interpolateName(loaderContext, name, options) { let filename; + const hasQuery = + loaderContext.resourceQuery && loaderContext.resourceQuery.length > 1; + if (typeof name === 'function') { - filename = name(loaderContext.resourcePath); + filename = name( + loaderContext.resourcePath, + hasQuery ? loaderContext.resourceQuery : undefined + ); } else { filename = name || '[hash].[ext]'; } diff --git a/test/interpolateName.test.js b/test/interpolateName.test.js index 12c37c8..9f31464 100644 --- a/test/interpolateName.test.js +++ b/test/interpolateName.test.js @@ -167,6 +167,50 @@ describe('interpolateName()', () => { 'test content', 'js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar', ], + [ + '/app/js/javascript.js?foo=bar#hash', + (resourcePath, resourceQuery) => { + expect(resourcePath).toBeDefined(); + expect(resourceQuery).toBeDefined(); + + return 'js/[hash].script.[ext][query]'; + }, + 'test content', + 'js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar', + ], + [ + '/app/js/javascript.js?a', + (resourcePath, resourceQuery) => { + expect(resourcePath).toBeDefined(); + expect(resourceQuery).toBeDefined(); + + return 'js/[hash].script.[ext][query]'; + }, + 'test content', + 'js/9473fdd0d880a43c21b7778d34872157.script.js?a', + ], + [ + '/app/js/javascript.js', + (resourcePath, resourceQuery) => { + expect(resourcePath).toBeDefined(); + expect(resourceQuery).not.toBeDefined(); + + return 'js/[hash].script.[ext][query]'; + }, + 'test content', + 'js/9473fdd0d880a43c21b7778d34872157.script.js', + ], + [ + '/app/js/javascript.js?', + (resourcePath, resourceQuery) => { + expect(resourcePath).toBeDefined(); + expect(resourceQuery).not.toBeDefined(); + + return 'js/[hash].script.[ext][query]'; + }, + 'test content', + 'js/9473fdd0d880a43c21b7778d34872157.script.js', + ], ].forEach((test) => { it('should interpolate ' + test[0] + ' ' + test[1], () => { let resourcePath = '';