feat: the resourceQuery is passed to the interpolateName method (#…

…163)
webpack · Feb 19, 2020 · cd0e428 · cd0e428
1 parent 06d36cf
commit cd0e428
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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 = '';