Allow publicPath handler to return a function instead of string

README.md

@@ -257,6 +257,12 @@ module.exports = {
                 if (/images/.test(context)) {
                   return `image_output_path/${url}`;
                 }
+
+                if (/runtime/.test(context)) {
+                  return function(url) {
+                    return window.customPublicPath + url;
+                  }
+                }
 
                 return `public_path/${url}`;
               },

src/index.js

@@ -41,7 +41,10 @@ export default function loader(content) {
       }${url}`;
     }
 
-    publicPath = JSON.stringify(publicPath);
+    publicPath =
+      typeof publicPath === 'function'
+        ? `(${publicPath})("${url}")`
+        : JSON.stringify(publicPath);
   }
 
   if (typeof options.emitFile === 'undefined' || options.emitFile) {

test/__snapshots__/publicPath-option.test.js.snap

@@ -27,6 +27,18 @@ Object {
 }
 `;
 
+exports[`when applied with \`publicPath\` option matches snapshot for \`{Function}\` value returning \`{Function}\` 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = (function publicPath(url) {
+              // eslint-disable-next-line no-undef
+              return window.imageCdnBasePath + url;
+            })(\\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\");",
+}
+`;
+
 exports[`when applied with \`publicPath\` option matches snapshot for \`{String}\` value 1`] = `
 Object {
   "assets": Array [

test/publicPath-option.test.js

@@ -126,4 +126,26 @@ describe('when applied with `publicPath` option', () => {
 
     expect({ assets, source }).toMatchSnapshot();
   });
+
+  it('matches snapshot for `{Function}` value returning `{Function}`', async () => {
+    const config = {
+      loader: {
+        test: /(png|jpg|svg)/,
+        options: {
+          publicPath() {
+            return function publicPath(url) {
+              // eslint-disable-next-line no-undef
+              return window.imageCdnBasePath + url;
+            };
+          },
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [module] = stats.toJson().modules;
+    const { assets, source } = module;
+
+    expect({ assets, source }).toMatchSnapshot();
+  });
 });