fix(index): handle protocol URL's correctly (options.publicPath) (#253)

Author: michael-ciniawsky

src/index.js

@@ -18,16 +18,28 @@ export default function loader(content) {
     regExp: options.regExp,
   });
 
-  let outputPath = (
-    typeof options.outputPath === 'function' ? options.outputPath(url) : path.join(options.outputPath || '', url)
-  );
+  let outputPath = url;
+
+  if (options.outputPath) {
+    if (typeof options.outputPath === 'function') {
+      outputPath = options.outputPath(url);
+    } else {
+      outputPath = path.join(options.outputPath, url);
+    }
+  }
 
   if (options.useRelativePath) {
     const filePath = this.resourcePath;
-    const issuerContext = context || (this._module && this._module.issuer
-      && this._module.issuer.context);
 
-    const relativeUrl = issuerContext && path.relative(issuerContext, filePath).split(path.sep).join('/');
+    const issuerContext = context || (
+      this._module &&
+      this._module.issuer &&
+      this._module.issuer.context
+    );
+
+    const relativeUrl = issuerContext && path.relative(issuerContext, filePath)
+      .split(path.sep)
+      .join('/');
 
     const relativePath = relativeUrl && `${path.dirname(relativeUrl)}/`;
     // eslint-disable-next-line no-bitwise
@@ -38,15 +50,18 @@ export default function loader(content) {
     }
   }
 
-  let publicPath = null;
+  let publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`;
 
-  if (options.publicPath !== undefined) {
-    // support functions as publicPath to generate them dynamically
-    publicPath = JSON.stringify(
-      typeof options.publicPath === 'function' ? options.publicPath(url) : path.join(options.publicPath || '', url),
-    );
-  } else {
-    publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`;
+  if (options.publicPath) {
+    if (typeof options.publicPath === 'function') {
+      publicPath = options.publicPath(url);
+    } else if (options.publicPath.endsWith('/')) {
+      publicPath = options.publicPath + url;
+    } else {
+      publicPath = `${options.publicPath}/${url}`;
+    }
+
+    publicPath = JSON.stringify(publicPath);
   }
 
   if (options.emitFile === undefined || options.emitFile) {

test/options/__snapshots__/publicPath.test.js.snap

@@ -9,7 +9,16 @@ Object {
 }
 `;
 
-exports[`Options publicPath {String} 1`] = `
+exports[`Options publicPath {String} - URL 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = \\"https://cdn.com/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
+exports[`Options publicPath {String} - Without trailing slash 1`] = `
 Object {
   "assets": Array [
     "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
@@ -18,7 +27,7 @@ Object {
 }
 `;
 
-exports[`Options publicPath {String} without trailing slash 1`] = `
+exports[`Options publicPath {String} 1`] = `
 Object {
   "assets": Array [
     "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",

test/options/publicPath.test.js

@@ -21,7 +21,7 @@ describe('Options', () => {
       expect({ assets, source }).toMatchSnapshot();
     });
 
-    test('{String} without trailing slash', async () => {
+    test('{String} - Without trailing slash', async () => {
       const config = {
         loader: {
           test: /(png|jpg|svg)/,
@@ -37,6 +37,22 @@ describe('Options', () => {
       expect({ assets, source }).toMatchSnapshot();
     });
 
+    test('{String} - URL', async () => {
+      const config = {
+        loader: {
+          test: /(png|jpg|svg)/,
+          options: {
+            publicPath: 'https://cdn.com/',
+          },
+        },
+      };
+
+      const stats = await webpack('fixture.js', config);
+      const { assets, source } = stats.toJson().modules[1];
+
+      expect({ assets, source }).toMatchSnapshot();
+    });
+
     test('{Function}', async () => {
       const config = {
         loader: {