Feature: add publicPath query option

README.md

@@ -128,8 +128,34 @@ into
 Options
 ------------------------------------------------------------------------
 
-The are currently no options.<br>
-You need one? Then you should think about:
+There is currently exactly one option: `publicPath`.
+If you are using a relative `publicPath` in webpack's [output options](http://webpack.github.io/docs/configuration.html#output-publicpath) and extracting to a file with the `file-loader`, you might need this to account for the location of your extracted file.
+
+Example:
+```js
+module.exports = {
+    output: {
+        path: path.resolve( './dist' ),
+        publicPath: 'dist/'
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.css$/,
+                loaders: [
+                    // target file: dist/assets/file.css
+                    "file?name=assets/[name].[ext]",
+                    // back up one directory to reach "dist/"
+                    "extract?publicPath=../",
+                    "css"
+                ]
+            }
+        ]
+    }
+};
+```
+
+You need another option? Then you should think about:
 
 <br>
 

package.json

@@ -44,5 +44,8 @@
     "rimraf": "^2.5.1",
     "style-loader": "^0.13.0",
     "webpack": "^1.12.13"
+  },
+  "dependencies": {
+    "loader-utils": "^0.2.16"
   }
 }

src/extractLoader.js

@@ -1,5 +1,6 @@
 import vm from "vm";
 import path from "path";
+import { parseQuery } from "loader-utils";
 
 /**
  * @name LoaderContext
@@ -26,6 +27,8 @@ const rndPlaceholder = "__EXTRACT_LOADER_PLACEHOLDER__" + rndNumber() + rndNumbe
  */
 function extractLoader(content) {
     const callback = this.async();
+    const query = parseQuery(this.query);
+    const publicPath = typeof query.publicPath !== "undefined" ? query.publicPath : this.options.output.publicPath;
     const dependencies = [];
     const script = new vm.Script(content, {
         filename: this.resourcePath,
@@ -60,7 +63,7 @@ function extractLoader(content) {
     Promise.all(dependencies.map(loadModule, this))
         .then(sources => sources.map(
             // runModule may throw an error, so it's important that our promise is rejected in this case
-            (src, i) => runModule(src, dependencies[i], this.options.output.publicPath)
+            (src, i) => runModule(src, dependencies[i], publicPath)
         ))
         .then(results => sandbox.module.exports.toString()
             .replace(new RegExp(rndPlaceholder, "g"), () => results.shift())

test/extractLoader.test.js

@@ -109,6 +109,16 @@ describe("extractLoader", () => {
             expect(imgHtml).to.have.content.that.match(/<img src="\/test\/hi-dist\.jpg">/);
         })
     );
+    it("should override the configured publicPath with the publicPath query option", () =>
+        compile({ testModule: "img.html", publicPath: "/test/", query: "?publicPath=/other/" }).then(() => {
+            const imgHtml = path.resolve(__dirname, "dist/img-dist.html");
+            const imgJpg = path.resolve(__dirname, "dist/hi-dist.jpg");
+
+            expect(imgHtml).to.be.a.file();
+            expect(imgJpg).to.be.a.file();
+            expect(imgHtml).to.have.content.that.match(/<img src="\/other\/hi-dist\.jpg">/);
+        })
+    );
     it("should report syntax errors", () =>
         compile({ testModule: "error.js" }).then(
             () => { throw new Error("Did not throw expected error"); },
@@ -127,7 +137,8 @@ describe("extractLoader", () => {
             },
             cacheable() {
                 cacheableCalled = true;
-            }
+            },
+            options: { output: {} }
         };
         let cacheableCalled = false;
 

test/support/compile.js

@@ -1,7 +1,7 @@
 import webpack from "webpack";
 import path from "path";
 
-export default function ({ testModule, publicPath }) {
+export default function ({ testModule, publicPath, query = "" }) {
     const testModulePath = path.resolve(__dirname, "../modules/", testModule);
 
     return new Promise((resolve, reject) => {
@@ -20,14 +20,14 @@ export default function ({ testModule, publicPath }) {
                         loaders: [
                             // appending -dist so we can check if url rewriting is working
                             "file?name=[name]-dist.[ext]",
-                            path.resolve(__dirname, "../../lib/extractLoader.js")
+                            path.resolve(__dirname, "../../lib/extractLoader.js") + query
                         ]
                     },
                     {
                         test: /\.html$/,
                         loaders: [
                             "file?name=[name]-dist.[ext]",
-                            path.resolve(__dirname, "../../lib/extractLoader.js"),
+                            path.resolve(__dirname, "../../lib/extractLoader.js") + query,
                             "html?" + JSON.stringify({
                                 attrs: ["img:src", "link:href"]
                             })
@@ -37,7 +37,7 @@ export default function ({ testModule, publicPath }) {
                         test: /\.css$/,
                         loaders: [
                             "file?name=[name]-dist.[ext]",
-                            path.resolve(__dirname, "../../lib/extractLoader.js"),
+                            path.resolve(__dirname, "../../lib/extractLoader.js") + query,
                             "css"
                         ]
                     },