From a92f6308e6a64625fcf3bbbbdc4ecb33cbd30e1f Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Tue, 11 Apr 2017 21:15:51 -0300
Subject: [PATCH 01/40] fix: outputs from useRelativePath

---
 index.js                      | 150 ++++++++++++++++++++--------------
 test/correct-filename.test.js |   4 +-
 2 files changed, 90 insertions(+), 64 deletions(-)

diff --git a/index.js b/index.js
index 8d6cc43..ee8d36c 100644
--- a/index.js
+++ b/index.js
@@ -1,80 +1,106 @@
 /*
-	MIT License http://www.opensource.org/licenses/mit-license.php
-	Author Tobias Koppers @sokra
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
 */
 var path = require("path");
 var loaderUtils = require("loader-utils");
 
 module.exports = function(content) {
-	this.cacheable && this.cacheable();
-	if(!this.emitFile) throw new Error("emitFile is required from module system");
+  this.cacheable && this.cacheable();
+  if(!this.emitFile) throw new Error("emitFile is required from module system");
 
-	var query = loaderUtils.getOptions(this) || {};
-	var configKey = query.config || "fileLoader";
-	var options = this.options[configKey] || {};
-	var config = {
-		publicPath: false,
-		useRelativePath: false,
-		name: "[hash].[ext]"
-	};
+  var query = loaderUtils.getOptions(this) || {};
+  var configKey = query.config || "fileLoader";
+  var options = this.options[configKey] || {};
+  var config = {
+    publicPath: false,
+    useRelativePath: false,
+    name: "[hash].[ext]"
+  };
 
-	// options takes precedence over config
-	Object.keys(options).forEach(function(attr) {
-		config[attr] = options[attr];
-	});
+  // options takes precedence over config
+  Object.keys(options).forEach(function(attr) {
+    config[attr] = options[attr];
+  });
 
-	// query takes precedence over config and options
-	Object.keys(query).forEach(function(attr) {
-		config[attr] = query[attr];
-	});
+  // query takes precedence over config and options
+  Object.keys(query).forEach(function(attr) {
+    config[attr] = query[attr];
+  });
 
-	var context = config.context || this.options.context;
-	var url = loaderUtils.interpolateName(this, config.name, {
-		context: context,
-		content: content,
-		regExp: config.regExp
-	});
+  var context = config.context || this.options.context;
+  var url = loaderUtils.interpolateName(this, config.name, {
+    context: context,
+    content: content,
+    regExp: config.regExp
+  });
 
-	var outputPath = "";
+  var outputPath = "";
+  if (config.outputPath) {
+    // support functions as outputPath to generate them dynamically
+    outputPath = (
+      typeof config.outputPath === "function"
+      ? config.outputPath(url)
+      : config.outputPath + url
+    );
+  }
 
-	var filePath = this.resourcePath;
-	if (config.useRelativePath) {
-		var issuerContext = this._module && this._module.issuer && this._module.issuer.context || context;
-		var relativeUrl = issuerContext && path.relative(issuerContext, filePath).split(path.sep).join("/");
-		var relativePath = relativeUrl && path.dirname(relativeUrl) + "/";
-		if (~relativePath.indexOf("../")) {
-			outputPath = path.posix.join(outputPath, relativePath, url);
-		} else {
-			outputPath = relativePath + url;
-		}
-		url = relativePath + url;
-	} else if (config.outputPath) {
-		// support functions as outputPath to generate them dynamically
-		outputPath = (
-			typeof config.outputPath === "function"
-			? config.outputPath(url)
-			: config.outputPath + url
-		);
-		url = outputPath;
-	} else {
-		outputPath = url;
-	}
+  if (config.useRelativePath) {
+    // Only the dirname is needed in this case.
+    outputPath = outputPath.replace(url, "");
 
-	var publicPath = "__webpack_public_path__ + " + JSON.stringify(url);
-	if (config.publicPath) {
-		// support functions as publicPath to generate them dynamically
-		publicPath = JSON.stringify(
-			typeof config.publicPath === "function"
-			? config.publicPath(url)
-			: config.publicPath + url
-		);
-	}
+    // We have access only to entry point relationships. So we work with this relations.
+    var issuerContext = (this._module && this._module.issuer && this._module.issuer.context) || context;
+    var relativeUrl = issuerContext && path.relative(issuerContext, this.resourcePath);
+    var relativePath = relativeUrl && path.dirname(relativeUrl);
+    var outputDirname = relativePath.replace(/\.\.(\/|\\)/g, "");
 
-	if (query.emitFile === undefined || query.emitFile) {
-		this.emitFile(outputPath, content);
-	}
+    // Output path
+    // If the `outputDirname` is pointing to up in relation to the `outputPath`.
+    // We forced him to the webpack output path config. Even though it is empty.
+    if (outputDirname.indexOf(outputPath) === -1) {
+      outputDirname = outputPath;
+    }
+    outputPath = path.join(outputDirname, url);
 
-	return "module.exports = " + publicPath + ";";
+    // Public path
+    // Entry files doesn't pass through the `file-loader`.
+    // So we don't have access to the files context to compare with your assets context
+    // then we need to kidnap from `extract-text-webpack-plugin` if you using him and the same way
+    // force the `relativePath` to extract files on the webpack output path config folder.
+    // otherwise make the same using the same output path from text extracted
+    // with `extract-text-webpack-plugin`.
+    var output = this.options.output || {};
+    if (output.filename && output.filename !== 'extract-text-webpack-plugin-output-filename') {
+      relativePath = outputPath;
+    } else if (config.textOutputPath) {
+      var outputPackageDirname = output.path.replace(this.options.context + path.sep, '');
+      var issuerOutput = path.join(context, outputPackageDirname, config.textOutputPath);
+      var assetOutput = path.join(context, outputPackageDirname, outputDirname);
+      relativePath = path.relative(issuerOutput, assetOutput);
+    }
+    url = path.join(relativePath, url).split(path.sep).join("/");
+  } else if (config.outputPath) {
+    url = outputPath;
+  } else {
+    outputPath = url;
+  }
+
+  var publicPath = "__webpack_public_path__ + " + JSON.stringify(url);
+  if (config.publicPath) {
+    // support functions as publicPath to generate them dynamically
+    publicPath = JSON.stringify(
+      typeof config.publicPath === "function"
+      ? config.publicPath(url)
+      : config.publicPath + url
+    );
+  }
+
+  if (query.emitFile === undefined || query.emitFile) {
+    this.emitFile(outputPath, content);
+  }
+
+  return "module.exports = " + publicPath + ";";
 };
 
 module.exports.raw = true;
diff --git a/test/correct-filename.test.js b/test/correct-filename.test.js
index 129eb00..ad653ea 100644
--- a/test/correct-filename.test.js
+++ b/test/correct-filename.test.js
@@ -97,7 +97,7 @@ describe("publicPath option", function() {
 describe("useRelativePath option", function() {
 	it("should be supported", function() {
 		run("/this/is/the/context/file.txt", "useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"./81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+			'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
 		);
 		run("/this/is/file.txt", "useRelativePath=true").result.should.be.eql(
 			'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
@@ -132,7 +132,7 @@ describe("outputPath function", function() {
 	      options.outputPath = outputFunc;
 	      options.useRelativePath = true;
 	      run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
-	        'module.exports = __webpack_public_path__ + \"./81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+	        'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
 	      );
 
 		});

From e15e3a4703c404d655de6471c466d5c6c66727f7 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Tue, 11 Apr 2017 22:04:08 -0300
Subject: [PATCH 02/40] fix: Allowing .travis.yml file in git

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index ff2c53b..9634a43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@
 
 # dotfiles
 .*
+!.editorconfig
 !.gitignore
+!.travis.yml
 *~
 *#*

From 6c5f1290efdfbc08d9bbfbc600fe44594d5e960c Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Tue, 11 Apr 2017 22:05:29 -0300
Subject: [PATCH 03/40] style: indentation

---
 test/correct-filename.test.js | 221 +++++++++++++++++-----------------
 1 file changed, 109 insertions(+), 112 deletions(-)

diff --git a/test/correct-filename.test.js b/test/correct-filename.test.js
index ad653ea..59af933 100644
--- a/test/correct-filename.test.js
+++ b/test/correct-filename.test.js
@@ -3,137 +3,134 @@ var path = require("path");
 var fileLoader = require("../");
 
 function run(resourcePath, query, content) {
-	content = content || new Buffer("1234");
-	var file = null;
-	var context = {
-		resourcePath: resourcePath,
-		query: "?" + query,
-		options: {
-			context: "/this/is/the/context"
-		},
-		emitFile: function(url, content2) {
-			content2.should.be.eql(content);
-			file = url;
-		}
-	};
+  content = content || new Buffer("1234");
+  var file = null;
+  var context = {
+    resourcePath: resourcePath,
+    query: "?" + query,
+    options: {
+      context: "/this/is/the/context"
+    },
+    emitFile: function(url, content2) {
+      content2.should.be.eql(content);
+      file = url;
+    }
+  };
 
-	var result = fileLoader.call(context, content)
+  var result = fileLoader.call(context, content)
 
-	return {
-		file: file,
-		result: result
-	}
+  return {
+    file: file,
+    result: result
+  }
 }
 function run_with_options(resourcePath,options, content) {
-	content = content || new Buffer("1234");
-	var file = null;
+  content = content || new Buffer("1234");
+  var file = null;
 
-	var context = {
-		resourcePath: resourcePath,
-		options: {
-			"fileLoader": options,
-			context: "/this/is/the/context"
-		},
-    	emitFile: function(url, content2) {
-			content2.should.be.eql(content);
-			file = url;
-		}
-	};
+  var context = {
+    resourcePath: resourcePath,
+    options: {
+      "fileLoader": options,
+      context: "/this/is/the/context"
+    },
+      emitFile: function(url, content2) {
+      content2.should.be.eql(content);
+      file = url;
+    }
+  };
 
-	var result = fileLoader.call(context, content)
+  var result = fileLoader.call(context, content)
 
-	return {
-		file: file,
-		result: result
-	}
+  return {
+    file: file,
+    result: result
+  }
 }
 
 function test(excepted, resourcePath, query, content) {
-	run(resourcePath, query, content).file.should.be.eql(excepted);
+  run(resourcePath, query, content).file.should.be.eql(excepted);
 }
 
 describe("correct-filename", function() {
-	it("should process defaults correctly", function() {
-		test("81dc9bdb52d04dc20036dbd8313ed055.txt", "/file.txt", "");
-		test("81dc9bdb52d04dc20036dbd8313ed055.png", "/file.png", "");
-		test("81dc9bdb52d04dc20036dbd8313ed055.txt", "file.txt", "");
-		test("81dc9bdb52d04dc20036dbd8313ed055.bin", "", "");
-	});
-	it("should process name correctly", function() {
-		test("file.txt", "/file.txt", "name=[name].[ext]");
-		test("file.png", "/file.png", "name=[name].[ext]");
-		test("file.txt", "file.txt", "name=[name].[ext]");
-		test("file.bin", "", "name=[name].[ext]");
-		test("file", "/file.txt", "name=[name]");
-		test("81dc9bdb52d04dc20036dbd8313ed055", "/file.txt", "name=[hash]");
-		test("81dc9bdb52d04dc20036dbd8313ed055/file.txt", "/file.txt", "name=[hash]/[name].[ext]");
-		test("file.txt", "/this/is/the/context/file.txt", "name=[path][name].[ext]");
-		test("dir/file.txt", "/this/is/the/context/dir/file.txt", "name=[path][name].[ext]");
-		test("dir/sub/file.txt", "/this/is/the/context/dir/sub/file.txt", "name=[path][name].[ext]");
-		test("_/_/dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]");
-		test("dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]&context=/this/is");
-	});
-	it("should process hash correctly", function() {
-		test("d93591bdf7860e1e4ee2fca799911215.txt", "/file.txt", "", new Buffer("4321"));
-	});
-	it("should process hash options correctly", function() {
-		test("81dc9.txt", "/file.txt", "name=[hash:5].[ext]");
-		test("d4045.txt", "/file.txt", "name=[sha512:hash:5].[ext]");
-		test("1lQ3UNSdIS0c9dQ5brCZO1.txt", "/file.txt", "name=[hash:base64].[ext]");
-		test("caYJDUvUOiGAdDsiHKffIEj.txt", "/file.txt", "name=[hash:base52].[ext]");
-		test("sntmopgidsdqrofkjywoyldtiij.txt", "/file.txt", "name=[hash:base26].[ext]");
-		test("sntmopgids.txt", "/file.txt", "name=[hash:base26:10].[ext]");
-	});
+  it("should process defaults correctly", function() {
+    test("81dc9bdb52d04dc20036dbd8313ed055.txt", "/file.txt", "");
+    test("81dc9bdb52d04dc20036dbd8313ed055.png", "/file.png", "");
+    test("81dc9bdb52d04dc20036dbd8313ed055.txt", "file.txt", "");
+    test("81dc9bdb52d04dc20036dbd8313ed055.bin", "", "");
+  });
+  it("should process name correctly", function() {
+    test("file.txt", "/file.txt", "name=[name].[ext]");
+    test("file.png", "/file.png", "name=[name].[ext]");
+    test("file.txt", "file.txt", "name=[name].[ext]");
+    test("file.bin", "", "name=[name].[ext]");
+    test("file", "/file.txt", "name=[name]");
+    test("81dc9bdb52d04dc20036dbd8313ed055", "/file.txt", "name=[hash]");
+    test("81dc9bdb52d04dc20036dbd8313ed055/file.txt", "/file.txt", "name=[hash]/[name].[ext]");
+    test("file.txt", "/this/is/the/context/file.txt", "name=[path][name].[ext]");
+    test("dir/file.txt", "/this/is/the/context/dir/file.txt", "name=[path][name].[ext]");
+    test("dir/sub/file.txt", "/this/is/the/context/dir/sub/file.txt", "name=[path][name].[ext]");
+    test("_/_/dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]");
+    test("dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]&context=/this/is");
+  });
+  it("should process hash correctly", function() {
+    test("d93591bdf7860e1e4ee2fca799911215.txt", "/file.txt", "", new Buffer("4321"));
+  });
+  it("should process hash options correctly", function() {
+    test("81dc9.txt", "/file.txt", "name=[hash:5].[ext]");
+    test("d4045.txt", "/file.txt", "name=[sha512:hash:5].[ext]");
+    test("1lQ3UNSdIS0c9dQ5brCZO1.txt", "/file.txt", "name=[hash:base64].[ext]");
+    test("caYJDUvUOiGAdDsiHKffIEj.txt", "/file.txt", "name=[hash:base52].[ext]");
+    test("sntmopgidsdqrofkjywoyldtiij.txt", "/file.txt", "name=[hash:base26].[ext]");
+    test("sntmopgids.txt", "/file.txt", "name=[hash:base26:10].[ext]");
+  });
 });
 
 describe("publicPath option", function() {
-	it("should be supported", function() {
-		run("/file.txt", "publicPath=http://cdn/").result.should.be.eql(
-			'module.exports = "http://cdn/81dc9bdb52d04dc20036dbd8313ed055.txt";'
-		);
-	});
+  it("should be supported", function() {
+    run("/file.txt", "publicPath=http://cdn/").result.should.be.eql(
+      'module.exports = "http://cdn/81dc9bdb52d04dc20036dbd8313ed055.txt";'
+    );
+  });
 });
 
 describe("useRelativePath option", function() {
-	it("should be supported", function() {
-		run("/this/is/the/context/file.txt", "useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-		);
-		run("/this/is/file.txt", "useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-		);
-		run("/this/file.txt", "context=/this/is/the/&useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-		);
-		run("/this/file.txt", "context=/&useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"this/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-		);
-	});
+  it("should be supported", function() {
+    run("/this/is/the/context/file.txt", "useRelativePath=true").result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+    run("/this/is/file.txt", "useRelativePath=true").result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+    run("/this/file.txt", "context=/this/is/the/&useRelativePath=true").result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+    run("/this/file.txt", "context=/&useRelativePath=true").result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"this/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+  });
 });
-describe("outputPath function", function() {
-	it("should be supported", function() {
-      outputFunc = function(value) {
-        return("/path/set/by/func");
-
-      };
-      var options = {};
-      options.outputPath = outputFunc;
-      run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
-        'module.exports = __webpack_public_path__ + \"/path/set/by/func\";'
-      );
-
-	});
-	it("should be ignored if you set useRelativePath", function() {
-	      outputFunc = function(value) {
-	        return("/path/set/by/func");
 
-	      };
-	      var options = {};
-	      options.outputPath = outputFunc;
-	      options.useRelativePath = true;
-	      run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
-	        'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-	      );
-
-		});
+describe("outputPath function", function() {
+  it("should be supported", function() {
+    outputFunc = function(value) {
+      return("/path/set/by/func");
+    };
+    var options = {};
+    options.outputPath = outputFunc;
+    run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"/path/set/by/func\";'
+    );
+  });
+  it("should be ignored if you set useRelativePath", function() {
+    outputFunc = function(value) {
+      return("/path/set/by/func");
+    };
+    var options = {};
+    options.outputPath = outputFunc;
+    options.useRelativePath = true;
+    run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+  });
 });

From 509855dd8c5cbb315cc9bb826ad125be21fad4bf Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 12:25:28 -0300
Subject: [PATCH 04/40] fix: outputs

---
 index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index ee8d36c..0192b43 100644
--- a/index.js
+++ b/index.js
@@ -53,12 +53,12 @@ module.exports = function(content) {
     var issuerContext = (this._module && this._module.issuer && this._module.issuer.context) || context;
     var relativeUrl = issuerContext && path.relative(issuerContext, this.resourcePath);
     var relativePath = relativeUrl && path.dirname(relativeUrl);
-    var outputDirname = relativePath.replace(/\.\.(\/|\\)/g, "");
+    var outputDirname = relativePath.replace(/\.\.(\/|\\)/g, "").split(path.sep).join("/");
 
     // Output path
     // If the `outputDirname` is pointing to up in relation to the `outputPath`.
     // We forced him to the webpack output path config. Even though it is empty.
-    if (outputDirname.indexOf(outputPath) === -1) {
+    if (outputDirname.indexOf(outputPath) !== 0) {
       outputDirname = outputPath;
     }
     outputPath = path.join(outputDirname, url);

From 1eb69cd4d73d366594912894e1670ad27ecf4740 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 12:27:35 -0300
Subject: [PATCH 05/40] style: keeping only double quotes

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 0192b43..e27fd47 100644
--- a/index.js
+++ b/index.js
@@ -71,7 +71,7 @@ module.exports = function(content) {
     // otherwise make the same using the same output path from text extracted
     // with `extract-text-webpack-plugin`.
     var output = this.options.output || {};
-    if (output.filename && output.filename !== 'extract-text-webpack-plugin-output-filename') {
+    if (output.filename && output.filename !== "extract-text-webpack-plugin-output-filename") {
       relativePath = outputPath;
     } else if (config.textOutputPath) {
       var outputPackageDirname = output.path.replace(this.options.context + path.sep, '');

From 7dbce89ab5b118ad10ef03ca04c9ea4efa6deca2 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 16:23:08 -0300
Subject: [PATCH 06/40] fix: textOutputPath parameter validation

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index e27fd47..d419148 100644
--- a/index.js
+++ b/index.js
@@ -73,7 +73,7 @@ module.exports = function(content) {
     var output = this.options.output || {};
     if (output.filename && output.filename !== "extract-text-webpack-plugin-output-filename") {
       relativePath = outputPath;
-    } else if (config.textOutputPath) {
+    } else if (toString.call(config.textOutputPath) === '[object String]') {
       var outputPackageDirname = output.path.replace(this.options.context + path.sep, '');
       var issuerOutput = path.join(context, outputPackageDirname, config.textOutputPath);
       var assetOutput = path.join(context, outputPackageDirname, outputDirname);

From ffe9709b688c569a1f184df85c32fb412e2d20b0 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 16:40:45 -0300
Subject: [PATCH 07/40] fix: normalized outputPath sep in windows os

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index d419148..62a1558 100644
--- a/index.js
+++ b/index.js
@@ -61,7 +61,7 @@ module.exports = function(content) {
     if (outputDirname.indexOf(outputPath) !== 0) {
       outputDirname = outputPath;
     }
-    outputPath = path.join(outputDirname, url);
+    outputPath = path.join(outputDirname, url).split(path.sep).join("/");
 
     // Public path
     // Entry files doesn't pass through the `file-loader`.

From f2ebd8627af177c532e0ddbfbb2af8bc43def2fb Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 17:06:54 -0300
Subject: [PATCH 08/40] docs: textOutputPath parameter

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b9ef3bb..efb7b4c 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,8 @@ use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images
 }
 ```
 
+`textOutputPath` also should be used to define the output path from extracted file (i.e. css files) if you use them.
+
 #### Filename template placeholders
 
 * `[ext]` the extension of the resource
@@ -152,4 +154,4 @@ MIT
 [cover-url]: https://coveralls.io/github/webpack-contrib/file-loader
 
 [chat]: https://badges.gitter.im/webpack/webpack.svg
-[chat-url]: https://gitter.im/webpack/webpack
\ No newline at end of file
+[chat-url]: https://gitter.im/webpack/webpack

From d3ddff55a79cdc51e943df8ac037ecb67d5b1fe1 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 17:09:20 -0300
Subject: [PATCH 09/40] docs: textOutputPath parameter

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index efb7b4c..b790ba1 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images
 }
 ```
 
-`textOutputPath` also should be used to define the output path from extracted file (i.e. css files) if you use them.
+`textOutputPath` also should be used (together with useRelativePath property) to define the output path from extracted file (i.e. css files) if you use them.
 
 #### Filename template placeholders
 

From 7cf49218b862cd29b04bd00580f31ec5da1002fb Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 17:11:04 -0300
Subject: [PATCH 10/40] docs: textOutputPath parameter

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b790ba1..0fd6145 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images
 }
 ```
 
-`textOutputPath` also should be used (together with useRelativePath property) to define the output path from extracted file (i.e. css files) if you use them.
+`textOutputPath` also should be used (together with `useRelativePath` property) to define the output path from extracted file (i.e. css files) if you use them.
 
 #### Filename template placeholders
 

From 74c9e98c87fe05c5d399bf64c8a2720fa2ad3c05 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 17:17:37 -0300
Subject: [PATCH 11/40] style: keeping only double quotes

---
 index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index 62a1558..6dd3163 100644
--- a/index.js
+++ b/index.js
@@ -73,8 +73,8 @@ module.exports = function(content) {
     var output = this.options.output || {};
     if (output.filename && output.filename !== "extract-text-webpack-plugin-output-filename") {
       relativePath = outputPath;
-    } else if (toString.call(config.textOutputPath) === '[object String]') {
-      var outputPackageDirname = output.path.replace(this.options.context + path.sep, '');
+    } else if (toString.call(config.textOutputPath) === "[object String]") {
+      var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
       var issuerOutput = path.join(context, outputPackageDirname, config.textOutputPath);
       var assetOutput = path.join(context, outputPackageDirname, outputDirname);
       relativePath = path.relative(issuerOutput, assetOutput);

From 5c4d2a475e1477b3c5c3c9d4c65d7e0c0d4b800b Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 12 Apr 2017 17:27:19 -0300
Subject: [PATCH 12/40] fix: public path from js files

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 6dd3163..6fc71b6 100644
--- a/index.js
+++ b/index.js
@@ -72,7 +72,7 @@ module.exports = function(content) {
     // with `extract-text-webpack-plugin`.
     var output = this.options.output || {};
     if (output.filename && output.filename !== "extract-text-webpack-plugin-output-filename") {
-      relativePath = outputPath;
+      relativePath = outputDirname;
     } else if (toString.call(config.textOutputPath) === "[object String]") {
       var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
       var issuerOutput = path.join(context, outputPackageDirname, config.textOutputPath);

From bdbb0e225c2b757663683f6d99724a1c0ec4dfbb Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Fri, 14 Apr 2017 11:34:41 -0300
Subject: [PATCH 13/40] style: identation to tabs

---
 index.js | 170 +++++++++++++++++++++++++++----------------------------
 1 file changed, 85 insertions(+), 85 deletions(-)

diff --git a/index.js b/index.js
index 6fc71b6..e199073 100644
--- a/index.js
+++ b/index.js
@@ -1,106 +1,106 @@
 /*
-  MIT License http://www.opensource.org/licenses/mit-license.php
-  Author Tobias Koppers @sokra
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
 */
 var path = require("path");
 var loaderUtils = require("loader-utils");
 
 module.exports = function(content) {
-  this.cacheable && this.cacheable();
-  if(!this.emitFile) throw new Error("emitFile is required from module system");
+	this.cacheable && this.cacheable();
+	if(!this.emitFile) throw new Error("emitFile is required from module system");
 
-  var query = loaderUtils.getOptions(this) || {};
-  var configKey = query.config || "fileLoader";
-  var options = this.options[configKey] || {};
-  var config = {
-    publicPath: false,
-    useRelativePath: false,
-    name: "[hash].[ext]"
-  };
+	var query = loaderUtils.getOptions(this) || {};
+	var configKey = query.config || "fileLoader";
+	var options = this.options[configKey] || {};
+	var config = {
+		publicPath: false,
+		useRelativePath: false,
+		name: "[hash].[ext]"
+	};
 
-  // options takes precedence over config
-  Object.keys(options).forEach(function(attr) {
-    config[attr] = options[attr];
-  });
+	// options takes precedence over config
+	Object.keys(options).forEach(function(attr) {
+		config[attr] = options[attr];
+	});
 
-  // query takes precedence over config and options
-  Object.keys(query).forEach(function(attr) {
-    config[attr] = query[attr];
-  });
+	// query takes precedence over config and options
+	Object.keys(query).forEach(function(attr) {
+		config[attr] = query[attr];
+	});
 
-  var context = config.context || this.options.context;
-  var url = loaderUtils.interpolateName(this, config.name, {
-    context: context,
-    content: content,
-    regExp: config.regExp
-  });
+	var context = config.context || this.options.context;
+	var url = loaderUtils.interpolateName(this, config.name, {
+		context: context,
+		content: content,
+		regExp: config.regExp
+	});
 
-  var outputPath = "";
-  if (config.outputPath) {
-    // support functions as outputPath to generate them dynamically
-    outputPath = (
-      typeof config.outputPath === "function"
-      ? config.outputPath(url)
-      : config.outputPath + url
-    );
-  }
+	var outputPath = "";
+	if (config.outputPath) {
+		// support functions as outputPath to generate them dynamically
+		outputPath = (
+			typeof config.outputPath === "function"
+			? config.outputPath(url)
+			: config.outputPath + url
+		);
+	}
 
-  if (config.useRelativePath) {
-    // Only the dirname is needed in this case.
-    outputPath = outputPath.replace(url, "");
+	if (config.useRelativePath) {
+		// Only the dirname is needed in this case.
+		outputPath = outputPath.replace(url, "");
 
-    // We have access only to entry point relationships. So we work with this relations.
-    var issuerContext = (this._module && this._module.issuer && this._module.issuer.context) || context;
-    var relativeUrl = issuerContext && path.relative(issuerContext, this.resourcePath);
-    var relativePath = relativeUrl && path.dirname(relativeUrl);
-    var outputDirname = relativePath.replace(/\.\.(\/|\\)/g, "").split(path.sep).join("/");
+		// We have access only to entry point relationships. So we work with this relations.
+		var issuerContext = (this._module && this._module.issuer && this._module.issuer.context) || context;
+		var relativeUrl = issuerContext && path.relative(issuerContext, this.resourcePath);
+		var relativePath = relativeUrl && path.dirname(relativeUrl);
+		var outputDirname = relativePath.replace(/\.\.(\/|\\)/g, "").split(path.sep).join("/");
 
-    // Output path
-    // If the `outputDirname` is pointing to up in relation to the `outputPath`.
-    // We forced him to the webpack output path config. Even though it is empty.
-    if (outputDirname.indexOf(outputPath) !== 0) {
-      outputDirname = outputPath;
-    }
-    outputPath = path.join(outputDirname, url).split(path.sep).join("/");
+		// Output path
+		// If the `outputDirname` is pointing to up in relation to the `outputPath`.
+		// We forced him to the webpack output path config. Even though it is empty.
+		if (outputDirname.indexOf(outputPath) !== 0) {
+			outputDirname = outputPath;
+		}
+		outputPath = path.join(outputDirname, url).split(path.sep).join("/");
 
-    // Public path
-    // Entry files doesn't pass through the `file-loader`.
-    // So we don't have access to the files context to compare with your assets context
-    // then we need to kidnap from `extract-text-webpack-plugin` if you using him and the same way
-    // force the `relativePath` to extract files on the webpack output path config folder.
-    // otherwise make the same using the same output path from text extracted
-    // with `extract-text-webpack-plugin`.
-    var output = this.options.output || {};
-    if (output.filename && output.filename !== "extract-text-webpack-plugin-output-filename") {
-      relativePath = outputDirname;
-    } else if (toString.call(config.textOutputPath) === "[object String]") {
-      var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
-      var issuerOutput = path.join(context, outputPackageDirname, config.textOutputPath);
-      var assetOutput = path.join(context, outputPackageDirname, outputDirname);
-      relativePath = path.relative(issuerOutput, assetOutput);
-    }
-    url = path.join(relativePath, url).split(path.sep).join("/");
-  } else if (config.outputPath) {
-    url = outputPath;
-  } else {
-    outputPath = url;
-  }
+		// Public path
+		// Entry files doesn't pass through the `file-loader`.
+		// So we don't have access to the files context to compare with your assets context
+		// then we need to kidnap from `extract-text-webpack-plugin` if you using him and the same way
+		// force the `relativePath` to extract files on the webpack output path config folder.
+		// otherwise make the same using the same output path from text extracted
+		// with `extract-text-webpack-plugin`.
+		var output = this.options.output || {};
+		if (output.filename && output.filename !== "extract-text-webpack-plugin-output-filename") {
+			relativePath = outputDirname;
+		} else if (toString.call(config.textOutputPath) === "[object String]") {
+			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
+			var issuerOutput = path.join(context, outputPackageDirname, config.textOutputPath);
+			var assetOutput = path.join(context, outputPackageDirname, outputDirname);
+			relativePath = path.relative(issuerOutput, assetOutput);
+		}
+		url = path.join(relativePath, url).split(path.sep).join("/");
+	} else if (config.outputPath) {
+		url = outputPath;
+	} else {
+		outputPath = url;
+	}
 
-  var publicPath = "__webpack_public_path__ + " + JSON.stringify(url);
-  if (config.publicPath) {
-    // support functions as publicPath to generate them dynamically
-    publicPath = JSON.stringify(
-      typeof config.publicPath === "function"
-      ? config.publicPath(url)
-      : config.publicPath + url
-    );
-  }
+	var publicPath = "__webpack_public_path__ + " + JSON.stringify(url);
+	if (config.publicPath) {
+		// support functions as publicPath to generate them dynamically
+		publicPath = JSON.stringify(
+			typeof config.publicPath === "function"
+			? config.publicPath(url)
+			: config.publicPath + url
+		);
+	}
 
-  if (query.emitFile === undefined || query.emitFile) {
-    this.emitFile(outputPath, content);
-  }
+	if (query.emitFile === undefined || query.emitFile) {
+		this.emitFile(outputPath, content);
+	}
 
-  return "module.exports = " + publicPath + ";";
+	return "module.exports = " + publicPath + ";";
 };
 
 module.exports.raw = true;

From 39b66b2e61354bb05b1a8d435b9c41f8c172d296 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Fri, 14 Apr 2017 23:40:20 -0300
Subject: [PATCH 14/40] chore: removed vendor references

---
 index.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index e199073..c687b24 100644
--- a/index.js
+++ b/index.js
@@ -66,12 +66,10 @@ module.exports = function(content) {
 		// Public path
 		// Entry files doesn't pass through the `file-loader`.
 		// So we don't have access to the files context to compare with your assets context
-		// then we need to kidnap from `extract-text-webpack-plugin` if you using him and the same way
-		// force the `relativePath` to extract files on the webpack output path config folder.
-		// otherwise make the same using the same output path from text extracted
-		// with `extract-text-webpack-plugin`.
+		// then we need to create and the same way force the `relativePath` to bundled files
+		// on the webpack output path config folder and manually the same with CSS file.
 		var output = this.options.output || {};
-		if (output.filename && output.filename !== "extract-text-webpack-plugin-output-filename") {
+		if (output.filename && path.extname(output.filename) === ".js") {
 			relativePath = outputDirname;
 		} else if (toString.call(config.textOutputPath) === "[object String]") {
 			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");

From 4d1a43c28d86dcbaaad965daf973121460248b2a Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Fri, 14 Apr 2017 23:52:14 -0300
Subject: [PATCH 15/40] chore: changing textOutputPath to cssOutputPath

---
 index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index c687b24..7275611 100644
--- a/index.js
+++ b/index.js
@@ -14,6 +14,7 @@ module.exports = function(content) {
 	var options = this.options[configKey] || {};
 	var config = {
 		publicPath: false,
+		cssOutputPath: "",
 		useRelativePath: false,
 		name: "[hash].[ext]"
 	};
@@ -71,9 +72,9 @@ module.exports = function(content) {
 		var output = this.options.output || {};
 		if (output.filename && path.extname(output.filename) === ".js") {
 			relativePath = outputDirname;
-		} else if (toString.call(config.textOutputPath) === "[object String]") {
+		} else if (toString.call(config.cssOutputPath) === "[object String]") {
 			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
-			var issuerOutput = path.join(context, outputPackageDirname, config.textOutputPath);
+			var issuerOutput = path.join(context, outputPackageDirname, config.cssOutputPath);
 			var assetOutput = path.join(context, outputPackageDirname, outputDirname);
 			relativePath = path.relative(issuerOutput, assetOutput);
 		}

From 3dde284e15933884576649f84e4fb93c4194388c Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Fri, 14 Apr 2017 23:53:45 -0300
Subject: [PATCH 16/40] docs: changing textOutputPath to cssOutputPath

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0fd6145..037296c 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images
 }
 ```
 
-`textOutputPath` also should be used (together with `useRelativePath` property) to define the output path from extracted file (i.e. css files) if you use them.
+`cssOutputPath` also should be used (together with `useRelativePath` property) to define the output path context.
 
 #### Filename template placeholders
 

From 584f0094dc9b925c049bc85f3b2622247a5ae2fa Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Sat, 15 Apr 2017 00:00:29 -0300
Subject: [PATCH 17/40] fix: cssOutputPath defaults

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 7275611..edfe8eb 100644
--- a/index.js
+++ b/index.js
@@ -72,7 +72,7 @@ module.exports = function(content) {
 		var output = this.options.output || {};
 		if (output.filename && path.extname(output.filename) === ".js") {
 			relativePath = outputDirname;
-		} else if (toString.call(config.cssOutputPath) === "[object String]") {
+		} else if (output.path && toString.call(config.cssOutputPath) === "[object String]") {
 			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
 			var issuerOutput = path.join(context, outputPackageDirname, config.cssOutputPath);
 			var assetOutput = path.join(context, outputPackageDirname, outputDirname);

From 41516e50a1f111a1239cd9c7db2d1a4a0b72aa28 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Sat, 15 Apr 2017 00:26:08 -0300
Subject: [PATCH 18/40] fix: script path validation

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index edfe8eb..9df262e 100644
--- a/index.js
+++ b/index.js
@@ -70,7 +70,7 @@ module.exports = function(content) {
 		// then we need to create and the same way force the `relativePath` to bundled files
 		// on the webpack output path config folder and manually the same with CSS file.
 		var output = this.options.output || {};
-		if (output.filename && path.extname(output.filename) === ".js") {
+		if (output.filename && path.extname(output.filename)) {
 			relativePath = outputDirname;
 		} else if (output.path && toString.call(config.cssOutputPath) === "[object String]") {
 			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");

From 7b9ee2ce7810f5e406eeb2f26efe6c275888c9e7 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Sat, 15 Apr 2017 00:45:16 -0300
Subject: [PATCH 19/40] fix: cssOutputPath default validation

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 9df262e..f89fc8e 100644
--- a/index.js
+++ b/index.js
@@ -72,7 +72,7 @@ module.exports = function(content) {
 		var output = this.options.output || {};
 		if (output.filename && path.extname(output.filename)) {
 			relativePath = outputDirname;
-		} else if (output.path && toString.call(config.cssOutputPath) === "[object String]") {
+		} else if (output.path && config.cssOutputPath) {
 			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
 			var issuerOutput = path.join(context, outputPackageDirname, config.cssOutputPath);
 			var assetOutput = path.join(context, outputPackageDirname, outputDirname);

From 02983bf8fc9b6caa127746524bde8c34505b67cd Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Sat, 15 Apr 2017 01:10:48 -0300
Subject: [PATCH 20/40] fix: type validation is needed to empty values

---
 index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index f89fc8e..1490fd2 100644
--- a/index.js
+++ b/index.js
@@ -14,8 +14,8 @@ module.exports = function(content) {
 	var options = this.options[configKey] || {};
 	var config = {
 		publicPath: false,
-		cssOutputPath: "",
 		useRelativePath: false,
+		cssOutputPath: "",
 		name: "[hash].[ext]"
 	};
 
@@ -72,7 +72,7 @@ module.exports = function(content) {
 		var output = this.options.output || {};
 		if (output.filename && path.extname(output.filename)) {
 			relativePath = outputDirname;
-		} else if (output.path && config.cssOutputPath) {
+		} else if (output.path && toString.call(config.cssOutputPath) === "[object String]") {
 			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
 			var issuerOutput = path.join(context, outputPackageDirname, config.cssOutputPath);
 			var assetOutput = path.join(context, outputPackageDirname, outputDirname);

From 23dffadb9990cc0b2d17b5f1a2581cb423a9ceb3 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Sat, 15 Apr 2017 10:34:34 -0300
Subject: [PATCH 21/40] fix: typo

---
 index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index 1490fd2..22cc3e6 100644
--- a/index.js
+++ b/index.js
@@ -66,8 +66,8 @@ module.exports = function(content) {
 
 		// Public path
 		// Entry files doesn't pass through the `file-loader`.
-		// So we don't have access to the files context to compare with your assets context
-		// then we need to create and the same way force the `relativePath` to bundled files
+		// So we haven't access to the files context to compare with your assets context
+		// then we need to create and the same way, force the `relativePath` to bundled files
 		// on the webpack output path config folder and manually the same with CSS file.
 		var output = this.options.output || {};
 		if (output.filename && path.extname(output.filename)) {

From 788a18902ef478ccb2907c65bcd182fd0ad2ad6e Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Mon, 17 Apr 2017 21:00:54 -0300
Subject: [PATCH 22/40] refactor: removes support for older node version

---
 index.js | 110 ++++++++++++++++++++++++++-----------------------------
 1 file changed, 51 insertions(+), 59 deletions(-)

diff --git a/index.js b/index.js
index 554f6b1..b5d5245 100644
--- a/index.js
+++ b/index.js
@@ -2,104 +2,96 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
 */
-var path = require("path");
-var loaderUtils = require("loader-utils");
+const path = require("path");
+const loaderUtils = require("loader-utils");
 
 module.exports = function(content) {
 	this.cacheable && this.cacheable();
-	if(!this.emitFile) throw new Error("emitFile is required from module system");
+	if (!this.emitFile) throw new Error("emitFile is required from module system");
 
-	var query = loaderUtils.getOptions(this) || {};
-	var configKey = query.config || "fileLoader";
-	var options = this.options[configKey] || {};
-	var config = {
-		publicPath: false,
+	const query = loaderUtils.getOptions(this) || {};
+	const configKey = query.config || "fileLoader";
+	const options = this.options[configKey] || {};
+	const config = Object.assign({
+		regExp: undefined,
+		context: undefined,
 		useRelativePath: false,
+		publicPath: false,
 		cssOutputPath: "",
-		name: "[hash].[ext]"
-	};
-
-	// options takes precedence over config
-	Object.keys(options).forEach(function(attr) {
-		config[attr] = options[attr];
-	});
-
-	// query takes precedence over config and options
-	Object.keys(query).forEach(function(attr) {
-		config[attr] = query[attr];
-	});
+		outputPath: "",
+		name: "[hash].[ext]",
+	}, options, query);
 
-	var context = config.context || this.options.context;
-	var url = loaderUtils.interpolateName(this, config.name, {
-		context: context,
-		content: content,
-		regExp: config.regExp
+	const context = config.context || this.options.context || process.cwd();
+	const issuer = (this._module && this._module.issuer) || {};
+	let url = loaderUtils.interpolateName(this, config.name, {
+		regExp: config.regExp,
+		context,
+		content,
 	});
 
-	var outputPath = "";
 	if (config.outputPath) {
 		// support functions as outputPath to generate them dynamically
-		outputPath = (
-			typeof config.outputPath === "function"
-			? config.outputPath(url)
-			: config.outputPath + url
-		);
+		config.outputPath = parsePath("outputPath", url);
 	}
 
 	if (config.useRelativePath) {
 		// Only the dirname is needed in this case.
-		outputPath = outputPath.replace(url, "");
+		config.outputPath = config.outputPath.replace(url, "");
 
 		// We have access only to entry point relationships. So we work with this relations.
-		var issuerContext = (this._module && this._module.issuer && this._module.issuer.context) || context;
-		var relativeUrl = issuerContext && path.relative(issuerContext, this.resourcePath);
-		var relativePath = relativeUrl && path.dirname(relativeUrl);
-		var outputDirname = relativePath.replace(/\.\.(\/|\\)/g, "").split(path.sep).join("/");
+		issuer.context = issuer.context || context;
+		const relation = { path: issuer.context && path.relative(issuer.context, this.resourcePath) };
+		relation.path = relation.path ? path.dirname(relation.path) : config.outputPath;
 
 		// Output path
-		// If the `outputDirname` is pointing to up in relation to the `outputPath`.
+		// If the `output.dirname` is pointing to up in relation to the `config.outputPath`.
 		// We forced him to the webpack output path config. Even though it is empty.
-		if (outputDirname.indexOf(outputPath) !== 0) {
-			outputDirname = outputPath;
-		}
-		outputPath = path.join(outputDirname, url).split(path.sep).join("/");
+		const output = this.options.output || {};
+		output.dirname = relation.path.replace(/\.\.(\/|\\)/g, "").split(path.sep).join("/");
+		if (output.dirname.indexOf(config.outputPath) !== 0) output.dirname = config.outputPath;
+		config.outputPath = path.join(output.dirname, url).split(path.sep).join("/");
 
 		// Public path
 		// Entry files doesn't pass through the `file-loader`.
 		// So we haven't access to the files context to compare with your assets context
-		// then we need to create and the same way, force the `relativePath` to bundled files
+		// then we need to create and the same way, force the `relation.path` to bundled files
 		// on the webpack output path config folder and manually the same with CSS file.
-		var output = this.options.output || {};
 		if (output.filename && path.extname(output.filename)) {
-			relativePath = outputDirname;
+			relation.path = output.dirname;
 		} else if (output.path && toString.call(config.cssOutputPath) === "[object String]") {
-			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
-			var issuerOutput = path.join(context, outputPackageDirname, config.cssOutputPath);
-			var assetOutput = path.join(context, outputPackageDirname, outputDirname);
-			relativePath = path.relative(issuerOutput, assetOutput);
+			output.bundle = output.path.replace(this.options.context + path.sep, "");
+			output.issuer = path.join(context, output.bundle, config.cssOutputPath);
+			output.asset = path.join(context, output.bundle, output.dirname);
+			relation.path = path.relative(output.issuer, output.asset);
 		}
-		url = path.join(relativePath, url).split(path.sep).join("/");
+		url = path.join(relation.path, url).split(path.sep).join("/");
 	} else if (config.outputPath) {
-		url = outputPath;
+		url = config.outputPath;
 	} else {
-		outputPath = url;
+		config.outputPath = url;
 	}
 
-	var publicPath = "__webpack_public_path__ + " + JSON.stringify(url);
 	if (config.publicPath !== false) {
 		// support functions as publicPath to generate them dynamically
-		publicPath = JSON.stringify(
-			typeof config.publicPath === "function"
-			? config.publicPath(url)
-			: config.publicPath + url
-		);
+		config.publicPath = JSON.stringify(parsePath("publicPath", url));
+	} else {
+		config.publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`;
 	}
 
 	if (query.emitFile === undefined || query.emitFile) {
-		this.emitFile(outputPath, content);
+		this.emitFile(config.outputPath, content);
 	}
 
-	return "module.exports = " + publicPath + ";";
+	return `module.exports = ${config.publicPath};`;
+	function parsePath(property, slug) {
+		if (!config[property]) {
+			return slug;
+		} else if (typeof config[property] === 'function') {
+			return config[property](slug);
+		}
+		return config[property] + slug;
+	}
 };
 
 module.exports.raw = true;

From 02c8e32cf0375dd2aad51eb2b36e63c6676871bf Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Mon, 17 Apr 2017 21:14:58 -0300
Subject: [PATCH 23/40] refactor: strict mode

---
 index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.js b/index.js
index b5d5245..41b63a8 100644
--- a/index.js
+++ b/index.js
@@ -6,6 +6,8 @@ const path = require("path");
 const loaderUtils = require("loader-utils");
 
 module.exports = function(content) {
+	"use strict";
+
 	this.cacheable && this.cacheable();
 	if (!this.emitFile) throw new Error("emitFile is required from module system");
 

From f190ee531a068042a38af92434cb6f9157a48a34 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Tue, 18 Apr 2017 00:45:07 -0300
Subject: [PATCH 24/40] docs: adding examples folder

---
 examples/use-relative-path/index.html         |  8 +++
 examples/use-relative-path/package.json       | 16 ++++++
 examples/use-relative-path/source/index.js    |  2 +
 .../use-relative-path/source/styles/index.css | 27 ++++++++++
 examples/use-relative-path/webpack.config.js  | 49 +++++++++++++++++++
 5 files changed, 102 insertions(+)
 create mode 100644 examples/use-relative-path/index.html
 create mode 100644 examples/use-relative-path/package.json
 create mode 100644 examples/use-relative-path/source/index.js
 create mode 100644 examples/use-relative-path/source/styles/index.css
 create mode 100644 examples/use-relative-path/webpack.config.js

diff --git a/examples/use-relative-path/index.html b/examples/use-relative-path/index.html
new file mode 100644
index 0000000..cdbbd41
--- /dev/null
+++ b/examples/use-relative-path/index.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="dist/styles/theme.css">
+  </head>
+  <body>
+    <script src="dist/scripts/main.js"></script>
+  </body>
+</html>
diff --git a/examples/use-relative-path/package.json b/examples/use-relative-path/package.json
new file mode 100644
index 0000000..089932d
--- /dev/null
+++ b/examples/use-relative-path/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "use-relative-path",
+  "author": "@adriancmiranda",
+  "scripts": {
+    "start": "webpack --env.dev",
+    "build": "webpack -p"
+  },
+  "optionalDependencies": {
+    "css-loader": "0.28.0",
+    "extract-text-webpack-plugin": "2.1.0",
+    "style-loader": "0.16.1"
+  },
+  "devDependencies": {
+    "webpack": "2.4.1"
+  }
+}
diff --git a/examples/use-relative-path/source/index.js b/examples/use-relative-path/source/index.js
new file mode 100644
index 0000000..bccfc5f
--- /dev/null
+++ b/examples/use-relative-path/source/index.js
@@ -0,0 +1,2 @@
+require('../../../.github/assets/file_loader_icon.svg');
+console.log('sample: useRelativePath');
diff --git a/examples/use-relative-path/source/styles/index.css b/examples/use-relative-path/source/styles/index.css
new file mode 100644
index 0000000..d1da1e9
--- /dev/null
+++ b/examples/use-relative-path/source/styles/index.css
@@ -0,0 +1,27 @@
+*,
+*:after,
+*:before {
+  -webkit-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+  box-sizing: border-box;
+  outline-style: none;
+}
+
+html {
+  font-size: 16px;
+  line-height: 10px;
+  font-family: sans-serif;
+}
+
+body {
+  background: transparent url("../../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  text-size-adjust: none;
+  -o-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -khtml-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+}
diff --git a/examples/use-relative-path/webpack.config.js b/examples/use-relative-path/webpack.config.js
new file mode 100644
index 0000000..f4dba9d
--- /dev/null
+++ b/examples/use-relative-path/webpack.config.js
@@ -0,0 +1,49 @@
+const path = require('path');
+const Text = require('extract-text-webpack-plugin');
+const fileLoader = require.resolve('../../');
+
+const resolve = (...args) => path.resolve(__dirname, ...args);
+const cssOutputPath = 'styles/';
+const jsOutputPath = 'scripts/';
+
+module.exports = (argv = {}) => ({
+	entry: [
+		'./source/styles/index.css',
+		'./source/index.js',
+	],
+	output: {
+		path: resolve('dist'),
+		filename: `${jsOutputPath}[name].js`,
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: Text.extract({
+					fallback: 'style-loader',
+					use: [{
+						loader: 'css-loader',
+						query: {
+							minimize: false,
+						},
+					}],
+				}),
+			},
+			{
+				test: /\.(jpe?g|png|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
+				loader: fileLoader,
+				options: {
+					cssOutputPath,
+					useRelativePath: true,
+				},
+			},
+		],
+	},
+	plugins: [
+		new Text({
+			filename: `${cssOutputPath}theme.css`,
+			disable: !!argv.dev,
+			allChunks: true,
+		}),
+	],
+});

From 298a05998ffc9c187ab4b8551ddfcea4304fd0f3 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Tue, 18 Apr 2017 01:04:46 -0300
Subject: [PATCH 25/40] docs: sample improvement

---
 .gitignore                                   | 8 +++++---
 examples/use-relative-path/webpack.config.js | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 9634a43..6730094 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,11 +1,13 @@
+# samples
+examples/*/dist/*
+
 # development
-/node_modules
-/coverage
+node_modules
+coverage
 *.log
 
 # dotfiles
 .*
-!.editorconfig
 !.gitignore
 !.travis.yml
 *~
diff --git a/examples/use-relative-path/webpack.config.js b/examples/use-relative-path/webpack.config.js
index f4dba9d..8fa073c 100644
--- a/examples/use-relative-path/webpack.config.js
+++ b/examples/use-relative-path/webpack.config.js
@@ -3,6 +3,7 @@ const Text = require('extract-text-webpack-plugin');
 const fileLoader = require.resolve('../../');
 
 const resolve = (...args) => path.resolve(__dirname, ...args);
+const assetsOutputPath = 'images/';
 const cssOutputPath = 'styles/';
 const jsOutputPath = 'scripts/';
 
@@ -34,6 +35,7 @@ module.exports = (argv = {}) => ({
 				loader: fileLoader,
 				options: {
 					cssOutputPath,
+					outputPath: assetsOutputPath,
 					useRelativePath: true,
 				},
 			},

From 68ac897c141524e504d50680432bc82c18d59a23 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Tue, 18 Apr 2017 09:30:59 -0300
Subject: [PATCH 26/40] doc: sample with dev mode

---
 examples/use-relative-path/index.html         |  8 -----
 examples/use-relative-path/package.json       |  8 +++--
 examples/use-relative-path/source/index.css   | 19 ++++++++++
 examples/use-relative-path/source/index.html  |  9 +++++
 examples/use-relative-path/source/index.js    | 11 ++++--
 .../use-relative-path/source/styles/index.css | 27 --------------
 examples/use-relative-path/webpack.config.js  | 36 ++++++++++++++-----
 7 files changed, 70 insertions(+), 48 deletions(-)
 delete mode 100644 examples/use-relative-path/index.html
 create mode 100644 examples/use-relative-path/source/index.css
 create mode 100644 examples/use-relative-path/source/index.html
 delete mode 100644 examples/use-relative-path/source/styles/index.css

diff --git a/examples/use-relative-path/index.html b/examples/use-relative-path/index.html
deleted file mode 100644
index cdbbd41..0000000
--- a/examples/use-relative-path/index.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" href="dist/styles/theme.css">
-  </head>
-  <body>
-    <script src="dist/scripts/main.js"></script>
-  </body>
-</html>
diff --git a/examples/use-relative-path/package.json b/examples/use-relative-path/package.json
index 089932d..c67e421 100644
--- a/examples/use-relative-path/package.json
+++ b/examples/use-relative-path/package.json
@@ -2,13 +2,17 @@
   "name": "use-relative-path",
   "author": "@adriancmiranda",
   "scripts": {
-    "start": "webpack --env.dev",
+    "dev": "webpack-dev-server --hot --inline --env.dev",
+    "prebuild": "rimraf dist/",
     "build": "webpack -p"
   },
   "optionalDependencies": {
     "css-loader": "0.28.0",
     "extract-text-webpack-plugin": "2.1.0",
-    "style-loader": "0.16.1"
+    "html-webpack-plugin": "2.28.0",
+    "rimraf": "2.6.1",
+    "style-loader": "0.16.1",
+    "webpack-dev-server": "2.4.2"
   },
   "devDependencies": {
     "webpack": "2.4.1"
diff --git a/examples/use-relative-path/source/index.css b/examples/use-relative-path/source/index.css
new file mode 100644
index 0000000..5353673
--- /dev/null
+++ b/examples/use-relative-path/source/index.css
@@ -0,0 +1,19 @@
+*,
+*:after,
+*:before {
+  -webkit-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+  box-sizing: border-box;
+  outline-style: none;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background: purple url("../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
+  margin: 0;
+}
diff --git a/examples/use-relative-path/source/index.html b/examples/use-relative-path/source/index.html
new file mode 100644
index 0000000..14dee88
--- /dev/null
+++ b/examples/use-relative-path/source/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/examples/use-relative-path/source/index.js b/examples/use-relative-path/source/index.js
index bccfc5f..49e3b59 100644
--- a/examples/use-relative-path/source/index.js
+++ b/examples/use-relative-path/source/index.js
@@ -1,2 +1,9 @@
-require('../../../.github/assets/file_loader_icon.svg');
-console.log('sample: useRelativePath');
+const fileLoaderIcon = require('../../../.github/assets/file_loader_icon.svg');
+
+const image = new Image();
+image.src = fileLoaderIcon;
+image.width = 30;
+image.height = 30;
+image.onload = () => {
+	document.body.appendChild(image);
+};
diff --git a/examples/use-relative-path/source/styles/index.css b/examples/use-relative-path/source/styles/index.css
deleted file mode 100644
index d1da1e9..0000000
--- a/examples/use-relative-path/source/styles/index.css
+++ /dev/null
@@ -1,27 +0,0 @@
-*,
-*:after,
-*:before {
-  -webkit-tap-highlight-color: transparent;
-  tap-highlight-color: transparent;
-  box-sizing: border-box;
-  outline-style: none;
-}
-
-html {
-  font-size: 16px;
-  line-height: 10px;
-  font-family: sans-serif;
-}
-
-body {
-  background: transparent url("../../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  text-size-adjust: none;
-  -o-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-  -moz-text-size-adjust: none;
-  -khtml-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-}
diff --git a/examples/use-relative-path/webpack.config.js b/examples/use-relative-path/webpack.config.js
index 8fa073c..6860965 100644
--- a/examples/use-relative-path/webpack.config.js
+++ b/examples/use-relative-path/webpack.config.js
@@ -1,26 +1,38 @@
 const path = require('path');
 const Text = require('extract-text-webpack-plugin');
+const Html = require('html-webpack-plugin');
 const fileLoader = require.resolve('../../');
 
 const resolve = (...args) => path.resolve(__dirname, ...args);
-const assetsOutputPath = 'images/';
-const cssOutputPath = 'styles/';
-const jsOutputPath = 'scripts/';
+
+const OUTPUT = {
+	bundle: 'dist/',
+	img: 'media/images/',
+	css: 'styles/',
+	js: 'scripts/',
+};
 
 module.exports = (argv = {}) => ({
 	entry: [
-		'./source/styles/index.css',
+		'./source/index.css',
 		'./source/index.js',
 	],
 	output: {
-		path: resolve('dist'),
-		filename: `${jsOutputPath}[name].js`,
+		path: resolve(OUTPUT.bundle),
+		filename: `${OUTPUT.js}[name].js`,
+	},
+	devServer: {
+		contentBase: resolve(OUTPUT.bundle),
+		stats: 'errors-only',
+		compress: true,
+		open: true,
 	},
 	module: {
 		rules: [
 			{
 				test: /\.css$/,
 				use: Text.extract({
+					publicPath: OUTPUT.bundle,
 					fallback: 'style-loader',
 					use: [{
 						loader: 'css-loader',
@@ -34,18 +46,24 @@ module.exports = (argv = {}) => ({
 				test: /\.(jpe?g|png|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
 				loader: fileLoader,
 				options: {
-					cssOutputPath,
-					outputPath: assetsOutputPath,
+					cssOutputPath: OUTPUT.css,
+					outputPath: OUTPUT.img,
 					useRelativePath: true,
+					name: '[name].[hash:7].[ext]',
 				},
 			},
 		],
 	},
 	plugins: [
 		new Text({
-			filename: `${cssOutputPath}theme.css`,
+			filename: `${OUTPUT.css}theme.css`,
 			disable: !!argv.dev,
 			allChunks: true,
 		}),
+		new Html({
+			title: 'Sample // useRelativePath',
+			template: './source/index.html',
+			hash: true,
+		}),
 	],
 });

From db0596c958c70d0688097f34bd1a6f113308b722 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Tue, 18 Apr 2017 12:44:49 -0300
Subject: [PATCH 27/40] docs: sample with asset request from html

---
 examples/use-relative-path/source/index.html | 13 +++++++------
 examples/use-relative-path/source/index.js   |  1 +
 examples/use-relative-path/webpack.config.js |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/examples/use-relative-path/source/index.html b/examples/use-relative-path/source/index.html
index 14dee88..3d9ab68 100644
--- a/examples/use-relative-path/source/index.html
+++ b/examples/use-relative-path/source/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-  </body>
+	<head>
+		<meta charset="UTF-8">
+		<title><%= htmlWebpackPlugin.options.title %></title>
+	</head>
+	<body>
+		<img src="${require(`../../../.github/assets/file_loader_icon.svg`)}" width="30" height="30" alt="">
+	</body>
 </html>
diff --git a/examples/use-relative-path/source/index.js b/examples/use-relative-path/source/index.js
index 49e3b59..00f57f3 100644
--- a/examples/use-relative-path/source/index.js
+++ b/examples/use-relative-path/source/index.js
@@ -5,5 +5,6 @@ image.src = fileLoaderIcon;
 image.width = 30;
 image.height = 30;
 image.onload = () => {
+	console.log('"%s" has been loaded as %o', fileLoaderIcon, image);
 	document.body.appendChild(image);
 };
diff --git a/examples/use-relative-path/webpack.config.js b/examples/use-relative-path/webpack.config.js
index 6860965..6f7b224 100644
--- a/examples/use-relative-path/webpack.config.js
+++ b/examples/use-relative-path/webpack.config.js
@@ -32,7 +32,7 @@ module.exports = (argv = {}) => ({
 			{
 				test: /\.css$/,
 				use: Text.extract({
-					publicPath: OUTPUT.bundle,
+					publicPath: argv.dev && OUTPUT.bundle,
 					fallback: 'style-loader',
 					use: [{
 						loader: 'css-loader',

From 1a0be65dfb41b8d09d7706d74f19b41cee36f78b Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 19 Apr 2017 17:46:33 -0300
Subject: [PATCH 28/40] docs: sample build fixed up

---
 .github/assets/file_loader_icon.svg          |  68 ++++-----
 examples/use-relative-path/package.json      |   2 +-
 examples/use-relative-path/source/index.css  |  38 ++++-
 examples/use-relative-path/source/index.html |   5 +-
 examples/use-relative-path/source/index.js   | 149 ++++++++++++++++++-
 examples/use-relative-path/webpack.config.js |  20 ++-
 6 files changed, 229 insertions(+), 53 deletions(-)

diff --git a/.github/assets/file_loader_icon.svg b/.github/assets/file_loader_icon.svg
index 358cfa9..c665956 100644
--- a/.github/assets/file_loader_icon.svg
+++ b/.github/assets/file_loader_icon.svg
@@ -1,36 +1,36 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>file_loader_icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <circle id="path-1" cx="64" cy="64" r="64"></circle>
-        <path d="M46,0 L4,0 C1.791,0 0,1.791 0,4 L0,76 C0,78.209 1.791,80 4,80 L60,80 C62.209,80 64,78.209 64,76 L64,18 L46,0 Z" id="path-3"></path>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="file_loader_icon">
-            <circle id="Oval" fill="#EAEFF0" cx="64" cy="64" r="64"></circle>
-            <g id="Background">
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="SVGID_9_"></g>
-                <polygon id="Shape" fill="#D4D7DE" opacity="0.55" mask="url(#mask-2)" points="33.096 102.746 58.351 128 128 128 128 73.888 96 42"></polygon>
-            </g>
-            <path d="M78,24 L36,24 C33.791,24 32,25.791 32,28 L32,100 C32,102.209 33.791,104 36,104 L92,104 C94.209,104 96,102.209 96,100 L96,42 L78,24 Z" id="Shape" fill="#2195CD"></path>
-            <g id="Icon" transform="translate(32.000000, 24.000000)">
-                <mask id="mask-4" fill="white">
-                    <use xlink:href="#path-3"></use>
-                </mask>
-                <use id="layer1" fill="#4D9BD8" xlink:href="#path-3"></use>
-                <rect id="bottom" fill="#1C78C0" mask="url(#mask-4)" x="0" y="48" width="64" height="36"></rect>
-                <path d="M52,18 L64,18 L46,0 L46,12 C46,15.314 48.686,18 52,18 Z" id="fold" fill="#8ED6FB" mask="url(#mask-4)"></path>
-            </g>
-            <g id="text" transform="translate(42.000000, 74.000000)" font-size="20" font-family="Roboto-Regular, Roboto" fill="#FFFFFF" font-weight="normal">
-                <text id="file://">
-                    <tspan x="0" y="21">file://</tspan>
-                </text>
-            </g>
-        </g>
-    </g>
+<svg width="100px" height="100px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+	<title>file_loader_icon</title>
+	<desc>Created with Sketch.</desc>
+	<defs>
+		<circle id="path-1" cx="64" cy="64" r="64"></circle>
+		<path d="M46,0 L4,0 C1.791,0 0,1.791 0,4 L0,76 C0,78.209 1.791,80 4,80 L60,80 C62.209,80 64,78.209 64,76 L64,18 L46,0 Z" id="path-3"></path>
+	</defs>
+	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<g id="file_loader_icon">
+			<circle id="Oval" fill="#EAEFF0" cx="64" cy="64" r="64"></circle>
+			<g id="Background">
+				<mask id="mask-2" fill="white">
+					<use xlink:href="#path-1"></use>
+				</mask>
+				<g id="SVGID_9_"></g>
+				<polygon id="Shape" fill="#D4D7DE" opacity="0.55" mask="url(#mask-2)" points="33.096 102.746 58.351 128 128 128 128 73.888 96 42"></polygon>
+			</g>
+			<path d="M78,24 L36,24 C33.791,24 32,25.791 32,28 L32,100 C32,102.209 33.791,104 36,104 L92,104 C94.209,104 96,102.209 96,100 L96,42 L78,24 Z" id="Shape" fill="#2195CD"></path>
+			<g id="Icon" transform="translate(32.000000, 24.000000)">
+				<mask id="mask-4" fill="white">
+					<use xlink:href="#path-3"></use>
+				</mask>
+				<use id="layer1" fill="#4D9BD8" xlink:href="#path-3"></use>
+				<rect id="bottom" fill="#1C78C0" mask="url(#mask-4)" x="0" y="48" width="64" height="36"></rect>
+				<path d="M52,18 L64,18 L46,0 L46,12 C46,15.314 48.686,18 52,18 Z" id="fold" fill="#8ED6FB" mask="url(#mask-4)"></path>
+			</g>
+			<g id="text" transform="translate(42.000000, 74.000000)" font-size="20" font-family="Roboto-Regular, Roboto" fill="#FFFFFF" font-weight="normal">
+				<text id="file://">
+					<tspan x="0" y="21">file://</tspan>
+				</text>
+			</g>
+		</g>
+	</g>
 </svg>
\ No newline at end of file
diff --git a/examples/use-relative-path/package.json b/examples/use-relative-path/package.json
index c67e421..7db44af 100644
--- a/examples/use-relative-path/package.json
+++ b/examples/use-relative-path/package.json
@@ -2,7 +2,7 @@
   "name": "use-relative-path",
   "author": "@adriancmiranda",
   "scripts": {
-    "dev": "webpack-dev-server --hot --inline --env.dev",
+    "dev": "webpack-dev-server --open --env.dev",
     "prebuild": "rimraf dist/",
     "build": "webpack -p"
   },
diff --git a/examples/use-relative-path/source/index.css b/examples/use-relative-path/source/index.css
index 5353673..07ad934 100644
--- a/examples/use-relative-path/source/index.css
+++ b/examples/use-relative-path/source/index.css
@@ -9,11 +9,41 @@
 
 html,
 body {
-  width: 100%;
-  height: 100%;
+	width: 100%;
+	height: 100%;
 }
 
 body {
-  background: purple url("../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
-  margin: 0;
+	font-family: Helvetica, sans-serif;
+	font-size: 16px;
+	line-height: 10px;
+	margin: 0;
 }
+
+div,
+canvas {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: purple;
+}
+
+div {
+	background: rgba(0,0,0,0.5) url("../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
+}
+
+img {
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	display: block;
+}
+
+div:before {
+	position: absolute;
+	display: block;
+	margin-top: 10px;
+	margin-left: 10px;
+	color: #fff;
+	content: "file-loader / examples / use-relative-path";
+}
\ No newline at end of file
diff --git a/examples/use-relative-path/source/index.html b/examples/use-relative-path/source/index.html
index 3d9ab68..539b6b0 100644
--- a/examples/use-relative-path/source/index.html
+++ b/examples/use-relative-path/source/index.html
@@ -5,6 +5,9 @@
 		<title><%= htmlWebpackPlugin.options.title %></title>
 	</head>
 	<body>
-		<img src="${require(`../../../.github/assets/file_loader_icon.svg`)}" width="30" height="30" alt="">
+		<canvas id="background"></canvas>
+		<div>
+			<img src="${require(`../../../.github/assets/file_loader_icon.svg`)}" width="30" height="30" alt="">
+		</div>
 	</body>
 </html>
diff --git a/examples/use-relative-path/source/index.js b/examples/use-relative-path/source/index.js
index 00f57f3..0b0b5fe 100644
--- a/examples/use-relative-path/source/index.js
+++ b/examples/use-relative-path/source/index.js
@@ -1,10 +1,143 @@
-const fileLoaderIcon = require('../../../.github/assets/file_loader_icon.svg');
+var Utils = {
+	randomRange: function(min, max) {
+		return Math.random() * (max - min) + min;
+	},
+	distance: function(x1, y1, x2, y2) {
+		return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+	},
+};
+
+function FileIcon(context, x, y, width, height) {
+	this.context = context;
+	this.image = new Image();
+	this.image.src = require('../../../.github/assets/file_loader_icon.svg');
+	this.canvasWidth = this.context.canvas.clientWidth;
+	this.canvasHeight = this.context.canvas.clientHeight;
+	this.scale = Math.floor(Utils.randomRange(0.05, 1) * 100) / 100;
+	this.x = Math.random() * this.canvasWidth;
+	this.y = Math.random() * this.canvasHeight;
+	this.point = {
+		x: Math.cos(Math.floor(Math.random() * 360)) * 1.1,
+		y: Math.sin(Math.floor(Math.random() * 360)) * 1.1
+	};
+}
+
+FileIcon.prototype = {
+	constructor: FileIcon,
+
+	update: function() {
+		this.bounds();
+		this.x += this.point.x;
+		this.y += this.point.y;
+	},
+
+	bounds: function() {
+		var boundsX = this.canvasWidth - this.image.width * this.scale / 2;
+		var boundsY = this.canvasHeight - this.image.height * this.scale / 2;
+		if (this.x >= boundsX || this.x <= 0) {
+			this.point.x *= -1;
+		}
+		if (this.y >= boundsY || this.y <= 0) {
+			this.point.y *= -1;
+		}
+		if (this.x > boundsX) {
+			this.x = boundsX;
+		}
+		if (this.y > boundsY) {
+			this.y = boundsY;
+		}
+		if (this.x < 0) {
+			this.x = 0;
+		}
+		if (this.y < 0) {
+			this.y = 0;
+		}
+	},
+
+	draw: function() {
+		var imageX = this.image.width * this.scale;
+		var imageY = this.image.height * this.scale;
+		this.context.drawImage(this.image,
+			this.x - imageX * 0.5,
+			this.y - imageY * 0.5,
+			imageX,
+			imageY
+		);
+	},
+};
+
+function FilesMesh(selector, options) {
+	this.options = Object.assign(FilesMesh.defaults, options);
+	this.canvas = document.querySelector(selector);
+	this.context = this.canvas.getContext('2d');
+	this.rgb = this.options.lineColor.match(/\d+/g);
+};
 
-const image = new Image();
-image.src = fileLoaderIcon;
-image.width = 30;
-image.height = 30;
-image.onload = () => {
-	console.log('"%s" has been loaded as %o', fileLoaderIcon, image);
-	document.body.appendChild(image);
+FilesMesh.defaults = {
+	lineColor: 'rgb(234, 239, 240)',
+	linkRadius: 300,
+	numFiles: 25,
+	minScale: 2,
+	maxScale: 2,
 };
+
+FilesMesh.prototype = {
+	constructor: FilesMesh,
+
+	start: function() {
+		this.arrange = this.arrange.bind(this);
+		window.addEventListener('resize', this.arrange);
+		this.arrange();
+
+		this.files = [];
+		this.draw = this.draw.bind(this);
+		for (var id = 0; id < this.options.numFiles; id++){
+			this.files.push(new FileIcon(this.context, 0, 0, 64, 64));
+		}
+		this.drawFrameID = window.requestAnimationFrame(this.draw);
+	},
+
+	stop: function(flush) {
+		window.removeEventListener('resize', this.arrange);
+		window.cancelAnimationFrame(this.drawFrameID);
+		delete this.drawFrameID;
+	},
+
+	bindFiles: function(file, dependencies) {
+		for (var id = 0; id < dependencies.length; id++) {
+			var distance = Utils.distance(file.x, file.y, dependencies[id].x, dependencies[id].y);
+			var alpha = 1 - distance / this.options.linkRadius;
+			if (alpha) {
+				var dependency = dependencies[id];
+				this.context.lineWidth = 0.5;
+				this.context.strokeStyle = 'rgba('+ this.rgb[0] +','+ this.rgb[1] +','+ this.rgb[2] +','+ alpha +')';
+				this.context.beginPath();
+				this.context.moveTo(file.x, file.y);
+				this.context.lineTo(dependency.x, dependency.y);
+				this.context.closePath();
+				this.context.stroke();
+			}
+		}
+	},
+
+	draw: function() {
+		var id;
+		this.drawFrameID = window.requestAnimationFrame(this.draw);
+		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		for (id = 0; id < this.files.length; id++) {
+			this.bindFiles(this.files[id], this.files);
+		}
+		for (id = 0; id < this.files.length; id++) {
+			this.files[id].update();
+			this.files[id].draw();
+		}
+	},
+
+	arrange: function() {
+		this.canvas.width = window.innerWidth;
+		this.canvas.height = window.innerHeight;
+	},
+};
+
+var mesh = new FilesMesh('#background');
+mesh.start();
\ No newline at end of file
diff --git a/examples/use-relative-path/webpack.config.js b/examples/use-relative-path/webpack.config.js
index 6f7b224..8a6eb86 100644
--- a/examples/use-relative-path/webpack.config.js
+++ b/examples/use-relative-path/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const Text = require('extract-text-webpack-plugin');
 const Html = require('html-webpack-plugin');
+const webpack = require('webpack');
 const fileLoader = require.resolve('../../');
 
 const resolve = (...args) => path.resolve(__dirname, ...args);
@@ -13,7 +14,10 @@ const OUTPUT = {
 };
 
 module.exports = (argv = {}) => ({
+	devtool: argv.dev ? '#eval-source-map' : '#source-map',
 	entry: [
+		'webpack-dev-server/client?http://localhost:8080',
+		'webpack/hot/only-dev-server',
 		'./source/index.css',
 		'./source/index.js',
 	],
@@ -23,9 +27,8 @@ module.exports = (argv = {}) => ({
 	},
 	devServer: {
 		contentBase: resolve(OUTPUT.bundle),
+		historyApiFallback: true,
 		stats: 'errors-only',
-		compress: true,
-		open: true,
 	},
 	module: {
 		rules: [
@@ -46,24 +49,31 @@ module.exports = (argv = {}) => ({
 				test: /\.(jpe?g|png|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
 				loader: fileLoader,
 				options: {
+					useRelativePath: true,
 					cssOutputPath: OUTPUT.css,
 					outputPath: OUTPUT.img,
-					useRelativePath: true,
 					name: '[name].[hash:7].[ext]',
 				},
 			},
 		],
 	},
 	plugins: [
+		new webpack.DefinePlugin({
+			'process.env': {
+				NODE_ENV: `'${argv.dev ? "development" : "production" }'`,
+			},
+		}),
 		new Text({
 			filename: `${OUTPUT.css}theme.css`,
 			disable: !!argv.dev,
 			allChunks: true,
 		}),
 		new Html({
-			title: 'Sample // useRelativePath',
+			title: 'file-loader // useRelativePath',
 			template: './source/index.html',
-			hash: true,
 		}),
+		new webpack.HotModuleReplacementPlugin({ quiet: true }),
+		new webpack.NoEmitOnErrorsPlugin(),
+		new webpack.NamedModulesPlugin(),
 	],
 });

From 6ea9f7e9749b22e43ec0d79e48ae3076dad145f8 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Wed, 19 Apr 2017 17:53:58 -0300
Subject: [PATCH 29/40] docs: sample build fixed up

---
 examples/use-relative-path/webpack.config.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/use-relative-path/webpack.config.js b/examples/use-relative-path/webpack.config.js
index 8a6eb86..22f26d3 100644
--- a/examples/use-relative-path/webpack.config.js
+++ b/examples/use-relative-path/webpack.config.js
@@ -15,12 +15,13 @@ const OUTPUT = {
 
 module.exports = (argv = {}) => ({
 	devtool: argv.dev ? '#eval-source-map' : '#source-map',
-	entry: [
+	entry: (argv.dev ? [
 		'webpack-dev-server/client?http://localhost:8080',
 		'webpack/hot/only-dev-server',
+	] : []).concat([
 		'./source/index.css',
 		'./source/index.js',
-	],
+	]),
 	output: {
 		path: resolve(OUTPUT.bundle),
 		filename: `${OUTPUT.js}[name].js`,

From 26077c73cfd48abf0bce538e4fb5b13077b55e94 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Thu, 20 Apr 2017 08:31:13 -0300
Subject: [PATCH 30/40] docs: added examples builder

---
 examples/build-all.js                      | 18 ++++++++++++++++++
 examples/exec.js                           | 15 +++++++++++++++
 examples/use-relative-path/source/index.js | 19 ++++++++++---------
 package.json                               |  8 +++++---
 4 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 examples/build-all.js
 create mode 100644 examples/exec.js

diff --git a/examples/build-all.js b/examples/build-all.js
new file mode 100644
index 0000000..f0bcb6f
--- /dev/null
+++ b/examples/build-all.js
@@ -0,0 +1,18 @@
+const fs = require("fs");
+const ora = require("ora");
+const path = require("path");
+const exec = require("./exec");
+
+const cmds = fs.readdirSync(__dirname).filter(dirname =>
+	fs.statSync(path.join(__dirname, dirname)).isDirectory() && dirname !== "node_modules"
+).sort().map(dirname => `cd ${dirname} && npm i && npm run build`);
+
+const stack = [];
+cmds.forEach(cmd => stack.push(exec(cmd)));
+
+const spinner = ora("building...");
+spinner.start();
+module.exports = Promise.all(stack).then((values) => {
+	spinner.stop();
+	return values;
+});
diff --git a/examples/exec.js b/examples/exec.js
new file mode 100644
index 0000000..62da5dc
--- /dev/null
+++ b/examples/exec.js
@@ -0,0 +1,15 @@
+const { exec } = require("child_process");
+
+module.exports = (cmd, options = {}) => {
+	return new Promise((resolve, reject) => {
+		const child = exec(cmd, options, (err, stdout, stderr) =>
+			err ? reject(err) : resolve({ out: stdout, err: stderr })
+		);
+		if (options.stdout) {
+			child.stdout.pipe(options.stdout);
+		}
+		if (options.stderr) {
+			child.stderr.pipe(options.stderr);
+		}
+	});
+};
diff --git a/examples/use-relative-path/source/index.js b/examples/use-relative-path/source/index.js
index 0b0b5fe..14df728 100644
--- a/examples/use-relative-path/source/index.js
+++ b/examples/use-relative-path/source/index.js
@@ -7,13 +7,13 @@ var Utils = {
 	},
 };
 
-function FileIcon(context, x, y, width, height) {
+function FileIcon(context, scale) {
 	this.context = context;
 	this.image = new Image();
 	this.image.src = require('../../../.github/assets/file_loader_icon.svg');
 	this.canvasWidth = this.context.canvas.clientWidth;
 	this.canvasHeight = this.context.canvas.clientHeight;
-	this.scale = Math.floor(Utils.randomRange(0.05, 1) * 100) / 100;
+	this.scale = scale;
 	this.x = Math.random() * this.canvasWidth;
 	this.y = Math.random() * this.canvasHeight;
 	this.point = {
@@ -75,10 +75,10 @@ function FilesMesh(selector, options) {
 
 FilesMesh.defaults = {
 	lineColor: 'rgb(234, 239, 240)',
-	linkRadius: 300,
+	bondDistance: 300,
 	numFiles: 25,
-	minScale: 2,
-	maxScale: 2,
+	minScale: 0.03,
+	maxScale: 1,
 };
 
 FilesMesh.prototype = {
@@ -91,8 +91,9 @@ FilesMesh.prototype = {
 
 		this.files = [];
 		this.draw = this.draw.bind(this);
-		for (var id = 0; id < this.options.numFiles; id++){
-			this.files.push(new FileIcon(this.context, 0, 0, 64, 64));
+		for (var id = 0, scale; id < this.options.numFiles; id++){
+			scale = Utils.randomRange(this.options.minScale, this.options.maxScale);
+			this.files.push(new FileIcon(this.context, Math.floor(scale * 100) / 100));
 		}
 		this.drawFrameID = window.requestAnimationFrame(this.draw);
 	},
@@ -106,7 +107,7 @@ FilesMesh.prototype = {
 	bindFiles: function(file, dependencies) {
 		for (var id = 0; id < dependencies.length; id++) {
 			var distance = Utils.distance(file.x, file.y, dependencies[id].x, dependencies[id].y);
-			var alpha = 1 - distance / this.options.linkRadius;
+			var alpha = 1 - distance / this.options.bondDistance;
 			if (alpha) {
 				var dependency = dependencies[id];
 				this.context.lineWidth = 0.5;
@@ -140,4 +141,4 @@ FilesMesh.prototype = {
 };
 
 var mesh = new FilesMesh('#background');
-mesh.start();
\ No newline at end of file
+mesh.start();
diff --git a/package.json b/package.json
index 06c5e12..8256013 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,16 @@
     "loader-utils": "^1.0.2"
   },
   "devDependencies": {
+    "mocha": "~1.21.3",
+    "ora": "1.2.0",
     "should": "~4.0.4",
-    "standard-version": "^4.0.0",
-    "mocha": "~1.21.3"
+    "standard-version": "^4.0.0"
   },
   "scripts": {
     "test": "mocha -R spec",
     "travis:test": "npm run test",
-    "release": "standard-version"
+    "release": "standard-version",
+    "build:examples": "cd examples && node build-all.js"
   },
   "repository": {
     "type": "git",

From 3bf2dac6678ebfb4d14a6265e2c79c90944d4ceb Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Thu, 20 Apr 2017 12:00:10 -0300
Subject: [PATCH 31/40] test: examples compilation

---
 examples/build-all.js | 15 ++++++++-------
 package.json          |  5 +++--
 test/examples.test.js | 16 ++++++++++++++++
 3 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 test/examples.test.js

diff --git a/examples/build-all.js b/examples/build-all.js
index f0bcb6f..e1e9a1a 100644
--- a/examples/build-all.js
+++ b/examples/build-all.js
@@ -3,16 +3,17 @@ const ora = require("ora");
 const path = require("path");
 const exec = require("./exec");
 
-const cmds = fs.readdirSync(__dirname).filter(dirname =>
-	fs.statSync(path.join(__dirname, dirname)).isDirectory() && dirname !== "node_modules"
-).sort().map(dirname => `cd ${dirname} && npm i && npm run build`);
+const examples = fs.readdirSync(__dirname).filter(dirname =>
+	fs.statSync(path.join(__dirname, dirname)).isDirectory()
+).map(dirname => path.join(__dirname, dirname));
 
-const stack = [];
-cmds.forEach(cmd => stack.push(exec(cmd)));
+const stack = examples.map(dirname => 
+	`cd ${dirname} && npm i --silent && npm run build`
+).map(cmd => exec(cmd));
 
 const spinner = ora("building...");
 spinner.start();
-module.exports = Promise.all(stack).then((values) => {
+module.exports = Promise.all(stack).then((response) => {
 	spinner.stop();
-	return values;
+	return response;
 });
diff --git a/package.json b/package.json
index 8256013..0567e46 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,11 @@
     "standard-version": "^4.0.0"
   },
   "scripts": {
-    "test": "mocha -R spec",
+    "test": "mocha \"test/[!examples]*.test.js\"",
     "travis:test": "npm run test",
     "release": "standard-version",
-    "build:examples": "cd examples && node build-all.js"
+    "build:examples": "cd examples && node build-all.js",
+    "examples:test": "mocha \"test/examples.test.js\""
   },
   "repository": {
     "type": "git",
diff --git a/test/examples.test.js b/test/examples.test.js
new file mode 100644
index 0000000..955c772
--- /dev/null
+++ b/test/examples.test.js
@@ -0,0 +1,16 @@
+const path = require("path");
+const should = require("should");
+const buildAll = require("../examples/build-all");
+const exec = require("../examples/exec");
+
+describe("examples", function() {
+	let examples;
+	it('should compile everything', function(done) {
+		this.timeout(0);
+		buildAll.then(response => {
+			examples = response.filter(std => !std.err);
+			examples.should.be.instanceOf(Array).and.have.lengthOf(response.length);
+			done();
+		}).catch(done);
+	});
+});
\ No newline at end of file

From 7fc4bd2e2121367f007380bdd09db0a8d06f5d97 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Thu, 20 Apr 2017 12:11:37 -0300
Subject: [PATCH 32/40] test: reporter

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0567e46..87cdd7b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "standard-version": "^4.0.0"
   },
   "scripts": {
-    "test": "mocha \"test/[!examples]*.test.js\"",
+    "test": "mocha -R spec \"test/[!examples]*.test.js\"",
     "travis:test": "npm run test",
     "release": "standard-version",
     "build:examples": "cd examples && node build-all.js",

From c66447b1a5baa99395ac3f8de6ed8e11676ea03f Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Thu, 20 Apr 2017 16:54:52 -0300
Subject: [PATCH 33/40] test: _module.issuer.context mockup

---
 test/correct-filename.test.js | 51 +++++++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 8 deletions(-)

diff --git a/test/correct-filename.test.js b/test/correct-filename.test.js
index 7cbe5f5..e3c3e3f 100644
--- a/test/correct-filename.test.js
+++ b/test/correct-filename.test.js
@@ -1,16 +1,25 @@
-var should = require("should");
 var path = require("path");
+var queryString = require("querystring");
+var should = require("should");
 var fileLoader = require("../");
 
 function run(resourcePath, query, content) {
   content = content || new Buffer("1234");
+  
+  var queryObject = queryString.parse(query);
   var file = null;
+
   var context = {
     resourcePath: resourcePath,
     query: "?" + query,
     options: {
       context: "/this/is/the/context"
     },
+    _module: {
+      issuer: {
+        context: queryObject.issuerContext
+      }
+    },
     emitFile: function(url, content2) {
       content2.should.be.eql(content);
       file = url;
@@ -24,17 +33,25 @@ function run(resourcePath, query, content) {
     result: result
   }
 }
-function run_with_options(resourcePath,options, content) {
+
+function run_with_options(resourcePath, options, content) {
   content = content || new Buffer("1234");
+  options = Object.assign({}, options);
+
   var file = null;
 
   var context = {
     resourcePath: resourcePath,
     options: {
-      "fileLoader": options,
+      fileLoader: options,
       context: "/this/is/the/context"
     },
-      emitFile: function(url, content2) {
+    _module: {
+      issuer: {
+        context: options.issuerContext
+      }
+    },
+    emitFile: function(url, content2) {
       content2.should.be.eql(content);
       file = url;
     }
@@ -108,16 +125,34 @@ describe("publicPath option", function() {
 
 describe("useRelativePath option", function() {
   it("should be supported", function() {
-    run("/this/is/the/context/file.txt", "useRelativePath=true").result.should.be.eql(
+    run_with_options("/this/is/the/context/file.txt", {
+      useRelativePath: true,
+      cssOutputPath: "/this/is/the/context/style",
+      issuerContext: "/this/is/the/context",
+    }).result.should.be.eql(
       'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
     );
-    run("/this/is/file.txt", "useRelativePath=true").result.should.be.eql(
+    run_with_options("/this/is/file.txt", {
+      useRelativePath: true,
+      cssOutputPath: "/this/is/the/context",
+      issuerContext: "/this/is/the/context",
+    }).result.should.be.eql(
       'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
     );
-    run("/this/file.txt", "context=/this/is/the/&useRelativePath=true").result.should.be.eql(
+    run_with_options("/this/file.txt", {
+      useRelativePath: true,
+      cssOutputPath: "/this/is/the/style",
+      issuerContext: "/this/is/the/",
+      context: "/this/is/the/",
+    }).result.should.be.eql(
       'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
     );
-    run("/this/file.txt", "context=/&useRelativePath=true").result.should.be.eql(
+    run_with_options("/this/file.txt", {
+      useRelativePath: true,
+      cssOutputPath: "/style",
+      issuerContext: "/",
+      context: "/",
+    }).result.should.be.eql(
       'module.exports = __webpack_public_path__ + \"this/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
     );
   });

From 3d136e3f16ec1ce404daa5a856ee1afc421d2b7f Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Fri, 21 Apr 2017 06:28:24 -0300
Subject: [PATCH 34/40] test: webpack config mock-up

---
 index.js                      |  12 +-
 test/correct-filename.test.js | 312 +++++++++++++++++++---------------
 2 files changed, 177 insertions(+), 147 deletions(-)

diff --git a/index.js b/index.js
index 41b63a8..e6205d0 100644
--- a/index.js
+++ b/index.js
@@ -34,7 +34,7 @@ module.exports = function(content) {
 
 	if (config.outputPath) {
 		// support functions as outputPath to generate them dynamically
-		config.outputPath = parsePath("outputPath", url);
+		config.outputPath = parsePath(config.outputPath, url);
 	}
 
 	if (config.useRelativePath) {
@@ -76,7 +76,7 @@ module.exports = function(content) {
 
 	if (config.publicPath !== false) {
 		// support functions as publicPath to generate them dynamically
-		config.publicPath = JSON.stringify(parsePath("publicPath", url));
+		config.publicPath = JSON.stringify(parsePath(config.publicPath, url));
 	} else {
 		config.publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`;
 	}
@@ -87,12 +87,12 @@ module.exports = function(content) {
 
 	return `module.exports = ${config.publicPath};`;
 	function parsePath(property, slug) {
-		if (!config[property]) {
+		if (!property) {
 			return slug;
-		} else if (typeof config[property] === 'function') {
-			return config[property](slug);
+		} else if (typeof property === 'function') {
+			return property(slug);
 		}
-		return config[property] + slug;
+		return property + slug;
 	}
 };
 
diff --git a/test/correct-filename.test.js b/test/correct-filename.test.js
index e3c3e3f..bd9544c 100644
--- a/test/correct-filename.test.js
+++ b/test/correct-filename.test.js
@@ -4,103 +4,109 @@ var should = require("should");
 var fileLoader = require("../");
 
 function run(resourcePath, query, content) {
-  content = content || new Buffer("1234");
-  
-  var queryObject = queryString.parse(query);
-  var file = null;
-
-  var context = {
-    resourcePath: resourcePath,
-    query: "?" + query,
-    options: {
-      context: "/this/is/the/context"
-    },
-    _module: {
-      issuer: {
-        context: queryObject.issuerContext
-      }
-    },
-    emitFile: function(url, content2) {
-      content2.should.be.eql(content);
-      file = url;
-    }
-  };
-
-  var result = fileLoader.call(context, content)
-
-  return {
-    file: file,
-    result: result
-  }
+	content = content || new Buffer("1234");
+
+	var file = null;
+	var queryObject = queryString.parse(query);
+	var webpackConfig = Object.assign({}, queryObject.webpackConfig);
+	delete queryObject.webpackConfig;
+
+	var context = {
+		resourcePath: resourcePath,
+		query: "?" + query,
+		options: {
+			context: "/this/is/the/context",
+			output: webpackConfig.output,
+		},
+		_module: {
+			issuer: {
+				context: webpackConfig._moduleIssuerContext,
+			},
+		},
+		emitFile: function(url, content2) {
+			content2.should.be.eql(content);
+			file = url;
+		},
+	};
+
+	var result = fileLoader.call(context, content)
+
+	return {
+		file: file,
+		result: result,
+	};
 }
 
 function run_with_options(resourcePath, options, content) {
-  content = content || new Buffer("1234");
-  options = Object.assign({}, options);
-
-  var file = null;
-
-  var context = {
-    resourcePath: resourcePath,
-    options: {
-      fileLoader: options,
-      context: "/this/is/the/context"
-    },
-    _module: {
-      issuer: {
-        context: options.issuerContext
-      }
-    },
-    emitFile: function(url, content2) {
-      content2.should.be.eql(content);
-      file = url;
-    }
-  };
-
-  var result = fileLoader.call(context, content)
-
-  return {
-    file: file,
-    result: result
-  }
+	content = content || new Buffer("1234");
+	options = Object.assign({}, options);
+
+	var file = null;
+	var webpackConfig = Object.assign({}, options.webpackConfig);
+	delete options.webpackConfig;
+
+	var context = {
+		resourcePath: resourcePath,
+		options: {
+			fileLoader: options,
+			context: "/this/is/the/context",
+			output: webpackConfig.output,
+		},
+		_module: {
+			issuer: {
+				context: webpackConfig._moduleIssuerContext,
+			},
+		},
+		emitFile: function(url, content2) {
+			content2.should.be.eql(content);
+			file = url;
+		},
+	};
+
+	var result = fileLoader.call(context, content)
+
+	return {
+		file: file,
+		result: result,
+	};
 }
 
 function test(excepted, resourcePath, query, content) {
-  run(resourcePath, query, content).file.should.be.eql(excepted);
+	run(resourcePath, query, content).file.should.be.eql(excepted);
 }
 
 describe("correct-filename", function() {
-  it("should process defaults correctly", function() {
-    test("81dc9bdb52d04dc20036dbd8313ed055.txt", "/file.txt", "");
-    test("81dc9bdb52d04dc20036dbd8313ed055.png", "/file.png", "");
-    test("81dc9bdb52d04dc20036dbd8313ed055.txt", "file.txt", "");
-    test("81dc9bdb52d04dc20036dbd8313ed055.bin", "", "");
-  });
-  it("should process name correctly", function() {
-    test("file.txt", "/file.txt", "name=[name].[ext]");
-    test("file.png", "/file.png", "name=[name].[ext]");
-    test("file.txt", "file.txt", "name=[name].[ext]");
-    test("file.bin", "", "name=[name].[ext]");
-    test("file", "/file.txt", "name=[name]");
-    test("81dc9bdb52d04dc20036dbd8313ed055", "/file.txt", "name=[hash]");
-    test("81dc9bdb52d04dc20036dbd8313ed055/file.txt", "/file.txt", "name=[hash]/[name].[ext]");
-    test("file.txt", "/this/is/the/context/file.txt", "name=[path][name].[ext]");
-    test("dir/file.txt", "/this/is/the/context/dir/file.txt", "name=[path][name].[ext]");
-    test("dir/sub/file.txt", "/this/is/the/context/dir/sub/file.txt", "name=[path][name].[ext]");
-    test("_/_/dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]");
-    test("dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]&context=/this/is");
-  });
-  it("should process hash correctly", function() {
-    test("d93591bdf7860e1e4ee2fca799911215.txt", "/file.txt", "", new Buffer("4321"));
-  });
-  it("should process hash options correctly", function() {
-    test("81dc9.txt", "/file.txt", "name=[hash:5].[ext]");
-    test("d4045.txt", "/file.txt", "name=[sha512:hash:5].[ext]");
-    test("1lQ3UNSdIS0c9dQ5brCZO1.txt", "/file.txt", "name=[hash:base64].[ext]");
-    test("caYJDUvUOiGAdDsiHKffIEj.txt", "/file.txt", "name=[hash:base52].[ext]");
-    test("sntmopgidsdqrofkjywoyldtiij.txt", "/file.txt", "name=[hash:base26].[ext]");
-    test("sntmopgids.txt", "/file.txt", "name=[hash:base26:10].[ext]");
-  });
+	it("should process defaults correctly", function() {
+		test("81dc9bdb52d04dc20036dbd8313ed055.txt", "/file.txt", "");
+		test("81dc9bdb52d04dc20036dbd8313ed055.png", "/file.png", "");
+		test("81dc9bdb52d04dc20036dbd8313ed055.txt", "file.txt", "");
+		test("81dc9bdb52d04dc20036dbd8313ed055.bin", "", "");
+	});
+	it("should process name correctly", function() {
+		test("file.txt", "/file.txt", "name=[name].[ext]");
+		test("file.png", "/file.png", "name=[name].[ext]");
+		test("file.txt", "file.txt", "name=[name].[ext]");
+		test("file.bin", "", "name=[name].[ext]");
+		test("file", "/file.txt", "name=[name]");
+		test("81dc9bdb52d04dc20036dbd8313ed055", "/file.txt", "name=[hash]");
+		test("81dc9bdb52d04dc20036dbd8313ed055/file.txt", "/file.txt", "name=[hash]/[name].[ext]");
+		test("file.txt", "/this/is/the/context/file.txt", "name=[path][name].[ext]");
+		test("dir/file.txt", "/this/is/the/context/dir/file.txt", "name=[path][name].[ext]");
+		test("dir/sub/file.txt", "/this/is/the/context/dir/sub/file.txt", "name=[path][name].[ext]");
+		test("_/_/dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]");
+		test("dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]&context=/this/is");
+	});
+	it("should process hash correctly", function() {
+		test("d93591bdf7860e1e4ee2fca799911215.txt", "/file.txt", "", new Buffer("4321"));
+	});
+	it("should process hash options correctly", function() {
+		test("81dc9.txt", "/file.txt", "name=[hash:5].[ext]");
+		test("d4045.txt", "/file.txt", "name=[sha512:hash:5].[ext]");
+		test("1lQ3UNSdIS0c9dQ5brCZO1.txt", "/file.txt", "name=[hash:base64].[ext]");
+		test("caYJDUvUOiGAdDsiHKffIEj.txt", "/file.txt", "name=[hash:base52].[ext]");
+		test("sntmopgidsdqrofkjywoyldtiij.txt", "/file.txt", "name=[hash:base26].[ext]");
+		test("sntmopgids.txt", "/file.txt", "name=[hash:base26:10].[ext]");
+	});
 });
 
 describe("publicPath option", function() {
@@ -124,60 +130,84 @@ describe("publicPath option", function() {
 });
 
 describe("useRelativePath option", function() {
-  it("should be supported", function() {
-    run_with_options("/this/is/the/context/file.txt", {
-      useRelativePath: true,
-      cssOutputPath: "/this/is/the/context/style",
-      issuerContext: "/this/is/the/context",
-    }).result.should.be.eql(
-      'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-    );
-    run_with_options("/this/is/file.txt", {
-      useRelativePath: true,
-      cssOutputPath: "/this/is/the/context",
-      issuerContext: "/this/is/the/context",
-    }).result.should.be.eql(
-      'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-    );
-    run_with_options("/this/file.txt", {
-      useRelativePath: true,
-      cssOutputPath: "/this/is/the/style",
-      issuerContext: "/this/is/the/",
-      context: "/this/is/the/",
-    }).result.should.be.eql(
-      'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-    );
-    run_with_options("/this/file.txt", {
-      useRelativePath: true,
-      cssOutputPath: "/style",
-      issuerContext: "/",
-      context: "/",
-    }).result.should.be.eql(
-      'module.exports = __webpack_public_path__ + \"this/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-    );
-  });
+	it("should be supported", function() {
+		run_with_options("/this/is/the/context/file.txt", {
+			useRelativePath: true,
+			cssOutputPath: "/this/is/the/context/style",
+			webpackConfig: {
+				_moduleIssuerContext: "/this/is/the/context",
+				output: {
+					path: "/this/is/the/context/dist",
+					filename: "[name].js",
+				},
+			},
+		}).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+		run_with_options("/this/is/file.txt", {
+			useRelativePath: true,
+			cssOutputPath: "/this/is/the/context",
+			webpackConfig: {
+				_moduleIssuerContext: "/this/is/the/context",
+				output: {
+					path: "/this/is/the/context/dist",
+					filename: "[name].js",
+				},
+			},
+		}).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+		run_with_options("/this/file.txt", {
+			useRelativePath: true,
+			cssOutputPath: "/this/is/the/style",
+			context: "/this/is/the/",
+			webpackConfig: {
+				_moduleIssuerContext: "/this/is/the/",
+				output: {
+					path: "/this/is/the/context/dist",
+					filename: "[name].js",
+				},
+			},
+		}).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+		run_with_options("/this/file.txt", {
+			useRelativePath: true,
+			cssOutputPath: "/style",
+			context: "/",
+			webpackConfig: {
+				_moduleIssuerContext: "/",
+				output: {
+					path: "/this/is/the/context/dist",
+					filename: "[name].js",
+				},
+			},
+		}).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"this/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+	});
 });
 
 describe("outputPath function", function() {
-  it("should be supported", function() {
-    outputFunc = function(value) {
-      return("/path/set/by/func");
-    };
-    var options = {};
-    options.outputPath = outputFunc;
-    run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
-      'module.exports = __webpack_public_path__ + \"/path/set/by/func\";'
-    );
-  });
-  it("should be ignored if you set useRelativePath", function() {
-    outputFunc = function(value) {
-      return("/path/set/by/func");
-    };
-    var options = {};
-    options.outputPath = outputFunc;
-    options.useRelativePath = true;
-    run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
-      'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-    );
-  });
+	it("should be supported", function() {
+		outputFunc = function(value) {
+			return("/path/set/by/func");
+		};
+		var options = {};
+		options.outputPath = outputFunc;
+		run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"/path/set/by/func\";'
+		);
+	});
+	it("should be ignored if you set useRelativePath", function() {
+		outputFunc = function(value) {
+			return("/path/set/by/func");
+		};
+		var options = {};
+		options.outputPath = outputFunc;
+		options.useRelativePath = true;
+		run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+	});
 });

From 57786c98f89e3ba4a12429557708021d5cea0943 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Fri, 21 Apr 2017 17:02:39 -0300
Subject: [PATCH 35/40] docs: update samples

---
 examples/build-all.js                         |   5 +-
 .../package.json                              |  21 ++++
 .../source/scripts/desktop.js                 |   1 +
 .../source/scripts/mobile.js                  |   1 +
 .../source/styles/desktop.css                 |  50 ++++++++
 .../source/styles/mobile.css                  |  50 ++++++++
 .../source/views/desktop.html                 |  13 +++
 .../source/views/mobile.html                  |  13 +++
 .../webpack.config.js                         | 110 ++++++++++++++++++
 .../package.json                              |   0
 .../source/index.css                          |   4 +-
 .../source/index.html                         |   0
 .../source/index.js                           |  33 +++---
 .../webpack.config.js                         |   0
 14 files changed, 282 insertions(+), 19 deletions(-)
 create mode 100644 examples/relative-path-with-multiple-outputs/package.json
 create mode 100644 examples/relative-path-with-multiple-outputs/source/scripts/desktop.js
 create mode 100644 examples/relative-path-with-multiple-outputs/source/scripts/mobile.js
 create mode 100644 examples/relative-path-with-multiple-outputs/source/styles/desktop.css
 create mode 100644 examples/relative-path-with-multiple-outputs/source/styles/mobile.css
 create mode 100644 examples/relative-path-with-multiple-outputs/source/views/desktop.html
 create mode 100644 examples/relative-path-with-multiple-outputs/source/views/mobile.html
 create mode 100644 examples/relative-path-with-multiple-outputs/webpack.config.js
 rename examples/{use-relative-path => relative-path-with-single-output}/package.json (100%)
 rename examples/{use-relative-path => relative-path-with-single-output}/source/index.css (90%)
 rename examples/{use-relative-path => relative-path-with-single-output}/source/index.html (100%)
 rename examples/{use-relative-path => relative-path-with-single-output}/source/index.js (77%)
 rename examples/{use-relative-path => relative-path-with-single-output}/webpack.config.js (100%)

diff --git a/examples/build-all.js b/examples/build-all.js
index e1e9a1a..b40af48 100644
--- a/examples/build-all.js
+++ b/examples/build-all.js
@@ -7,7 +7,7 @@ const examples = fs.readdirSync(__dirname).filter(dirname =>
 	fs.statSync(path.join(__dirname, dirname)).isDirectory()
 ).map(dirname => path.join(__dirname, dirname));
 
-const stack = examples.map(dirname => 
+const stack = examples.map(dirname =>
 	`cd ${dirname} && npm i --silent && npm run build`
 ).map(cmd => exec(cmd));
 
@@ -16,4 +16,7 @@ spinner.start();
 module.exports = Promise.all(stack).then((response) => {
 	spinner.stop();
 	return response;
+}).catch((reason) => {
+	spinner.stop();
+	console.error(reason);
 });
diff --git a/examples/relative-path-with-multiple-outputs/package.json b/examples/relative-path-with-multiple-outputs/package.json
new file mode 100644
index 0000000..0a94b47
--- /dev/null
+++ b/examples/relative-path-with-multiple-outputs/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "use-relative-path",
+  "author": "@adriancmiranda",
+  "scripts": {
+    "dev": "webpack-dev-server --open --env.dev",
+    "prebuild": "rimraf dist/",
+    "build": "webpack -p"
+  },
+  "optionalDependencies": {
+    "css-loader": "0.28.0",
+    "extract-text-webpack-plugin": "2.1.0",
+    "html-webpack-plugin": "2.28.0",
+    "ip": "1.1.5",
+    "rimraf": "2.6.1",
+    "style-loader": "0.16.1",
+    "webpack-dev-server": "2.4.2"
+  },
+  "devDependencies": {
+    "webpack": "2.4.1"
+  }
+}
diff --git a/examples/relative-path-with-multiple-outputs/source/scripts/desktop.js b/examples/relative-path-with-multiple-outputs/source/scripts/desktop.js
new file mode 100644
index 0000000..eb28b71
--- /dev/null
+++ b/examples/relative-path-with-multiple-outputs/source/scripts/desktop.js
@@ -0,0 +1 @@
+console.log('Desktop');
diff --git a/examples/relative-path-with-multiple-outputs/source/scripts/mobile.js b/examples/relative-path-with-multiple-outputs/source/scripts/mobile.js
new file mode 100644
index 0000000..14dedd7
--- /dev/null
+++ b/examples/relative-path-with-multiple-outputs/source/scripts/mobile.js
@@ -0,0 +1 @@
+console.log('Mobile');
diff --git a/examples/relative-path-with-multiple-outputs/source/styles/desktop.css b/examples/relative-path-with-multiple-outputs/source/styles/desktop.css
new file mode 100644
index 0000000..d9c1c7b
--- /dev/null
+++ b/examples/relative-path-with-multiple-outputs/source/styles/desktop.css
@@ -0,0 +1,50 @@
+/* Desktop styles */
+*,
+*:after,
+*:before {
+  -webkit-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+  box-sizing: border-box;
+  outline-style: none;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: Helvetica, sans-serif;
+  font-size: 16px;
+  line-height: 10px;
+  margin: 0;
+}
+
+div,
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(77, 155, 216);
+}
+
+div {
+  background: rgba(0,0,0,0.2) url("../../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
+}
+
+img {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: block;
+}
+
+div:before {
+  position: absolute;
+  display: block;
+  margin-top: 10px;
+  margin-left: 10px;
+  color: #fff;
+  content: "file-loader / examples / use-relative-path-multiple-output / desktop";
+}
diff --git a/examples/relative-path-with-multiple-outputs/source/styles/mobile.css b/examples/relative-path-with-multiple-outputs/source/styles/mobile.css
new file mode 100644
index 0000000..e3f2ca8
--- /dev/null
+++ b/examples/relative-path-with-multiple-outputs/source/styles/mobile.css
@@ -0,0 +1,50 @@
+/* Desktop styles */
+*,
+*:after,
+*:before {
+  -webkit-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+  box-sizing: border-box;
+  outline-style: none;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: Helvetica, sans-serif;
+  font-size: 16px;
+  line-height: 10px;
+  margin: 0;
+}
+
+div,
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(142, 214, 251);
+}
+
+div {
+  background: rgba(0,0,0,0.2) url("../../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
+}
+
+img {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: block;
+}
+
+div:before {
+  position: absolute;
+  display: block;
+  margin-top: 10px;
+  margin-left: 10px;
+  color: #fff;
+  content: "file-loader / examples / use-relative-path-multiple-output / mobile";
+}
diff --git a/examples/relative-path-with-multiple-outputs/source/views/desktop.html b/examples/relative-path-with-multiple-outputs/source/views/desktop.html
new file mode 100644
index 0000000..42c8565
--- /dev/null
+++ b/examples/relative-path-with-multiple-outputs/source/views/desktop.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <canvas id="background"></canvas>
+    <div>
+      <img src="${require(`../../../../.github/assets/file_loader_icon.svg`)}" width="30" height="30" alt="">
+    </div>
+  </body>
+</html>
diff --git a/examples/relative-path-with-multiple-outputs/source/views/mobile.html b/examples/relative-path-with-multiple-outputs/source/views/mobile.html
new file mode 100644
index 0000000..42c8565
--- /dev/null
+++ b/examples/relative-path-with-multiple-outputs/source/views/mobile.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <canvas id="background"></canvas>
+    <div>
+      <img src="${require(`../../../../.github/assets/file_loader_icon.svg`)}" width="30" height="30" alt="">
+    </div>
+  </body>
+</html>
diff --git a/examples/relative-path-with-multiple-outputs/webpack.config.js b/examples/relative-path-with-multiple-outputs/webpack.config.js
new file mode 100644
index 0000000..836ddc3
--- /dev/null
+++ b/examples/relative-path-with-multiple-outputs/webpack.config.js
@@ -0,0 +1,110 @@
+const ip = require('ip');
+const path = require('path');
+const Text = require('extract-text-webpack-plugin');
+const Html = require('html-webpack-plugin');
+const webpack = require('webpack');
+const fileLoader = require.resolve('../../');
+
+const resolve = (...args) => path.resolve(__dirname, ...args);
+
+const OUTPUT = {
+	bundle: 'dist/',
+	img: 'media/images/',
+	css: 'styles/',
+	js: 'scripts/',
+};
+
+module.exports = (argv = {}) => {
+
+	const config = {
+		devtool: argv.dev ? '#cheap-module-eval-source-map' : '#source-map',
+		entry: {
+			desktop: ['./source/scripts/desktop.js', './source/styles/desktop.css'],
+			mobile: ['./source/scripts/mobile.js', './source/styles/mobile.css'],
+		},
+		output: {
+			path: resolve(OUTPUT.bundle),
+			filename: `${OUTPUT.js}[name].js`,
+		},
+		devServer: {
+			contentBase: resolve(OUTPUT.bundle),
+			historyApiFallback: true,
+			stats: 'errors-only',
+			host: ip.address(),
+			port: 3000,
+		},
+		module: {
+			rules: [
+				{
+					test: /\.css$/,
+					use: Text.extract({
+						publicPath: argv.dev && OUTPUT.bundle,
+						fallback: 'style-loader',
+						use: [{
+							loader: 'css-loader',
+							query: {
+								minimize: false,
+							},
+						}],
+					}),
+				},
+				{
+					test: /\.(jpe?g|png|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
+					loader: fileLoader,
+					options: {
+						useRelativePath: true,
+
+						/*
+						|* If you need a multiple output path for any reason
+						|* @see https://github.com/webpack-contrib/file-loader/issues/149#issuecomment-294290509
+						`*/
+						cssOutputPath: OUTPUT.css,
+
+						outputPath: OUTPUT.img,
+						name: '[name].[hash:7].[ext]',
+					},
+				},
+			],
+		},
+		plugins: [
+			new webpack.DefinePlugin({
+				'process.env': {
+					NODE_ENV: `'${argv.dev ? "development" : "production" }'`,
+				},
+			}),
+			new Text({
+				filename: `${OUTPUT.css}[name]${argv.dev ? '' : '.[chunkhash]'}.css`,
+				disable: !!argv.dev,
+				allChunks: true,
+			}),
+			new Html({
+				title: 'file-loader // useRelativePath // mobile',
+				template: './source/views/mobile.html',
+				filename: 'mobile.html',
+				chunks: ['mobile'],
+			}),
+			new Html({
+				title: 'file-loader // useRelativePath // desktop',
+				template: './source/views/desktop.html',
+				filename: 'index.html',
+				chunks: ['desktop'],
+			}),
+			new webpack.HotModuleReplacementPlugin({ quiet: true }),
+			new webpack.NoEmitOnErrorsPlugin(),
+			new webpack.NamedModulesPlugin(),
+		],
+	};
+
+	if (argv.dev) {
+		const host = config.devServer.host;
+		const port = config.devServer.port;
+		Object.keys(config.entry).forEach((entry) => {
+			config.entry[entry] = [
+				`webpack-dev-server/client?http://${host}:${port}`,
+				'webpack/hot/only-dev-server',
+			].concat(config.entry[entry]);
+		});
+	}
+
+	return config;
+};
diff --git a/examples/use-relative-path/package.json b/examples/relative-path-with-single-output/package.json
similarity index 100%
rename from examples/use-relative-path/package.json
rename to examples/relative-path-with-single-output/package.json
diff --git a/examples/use-relative-path/source/index.css b/examples/relative-path-with-single-output/source/index.css
similarity index 90%
rename from examples/use-relative-path/source/index.css
rename to examples/relative-path-with-single-output/source/index.css
index 07ad934..9a1c03c 100644
--- a/examples/use-relative-path/source/index.css
+++ b/examples/relative-path-with-single-output/source/index.css
@@ -45,5 +45,5 @@ div:before {
 	margin-top: 10px;
 	margin-left: 10px;
 	color: #fff;
-	content: "file-loader / examples / use-relative-path";
-}
\ No newline at end of file
+	content: "file-loader / examples / use-relative-path-single-output";
+}
diff --git a/examples/use-relative-path/source/index.html b/examples/relative-path-with-single-output/source/index.html
similarity index 100%
rename from examples/use-relative-path/source/index.html
rename to examples/relative-path-with-single-output/source/index.html
diff --git a/examples/use-relative-path/source/index.js b/examples/relative-path-with-single-output/source/index.js
similarity index 77%
rename from examples/use-relative-path/source/index.js
rename to examples/relative-path-with-single-output/source/index.js
index 14df728..d224561 100644
--- a/examples/use-relative-path/source/index.js
+++ b/examples/relative-path-with-single-output/source/index.js
@@ -9,13 +9,12 @@ var Utils = {
 
 function FileIcon(context, scale) {
 	this.context = context;
+	this.canvas = this.context.canvas;
 	this.image = new Image();
 	this.image.src = require('../../../.github/assets/file_loader_icon.svg');
-	this.canvasWidth = this.context.canvas.clientWidth;
-	this.canvasHeight = this.context.canvas.clientHeight;
 	this.scale = scale;
-	this.x = Math.random() * this.canvasWidth;
-	this.y = Math.random() * this.canvasHeight;
+	this.x = Math.random() * this.canvas.clientWidth;
+	this.y = Math.random() * this.canvas.clientHeight;
 	this.point = {
 		x: Math.cos(Math.floor(Math.random() * 360)) * 1.1,
 		y: Math.sin(Math.floor(Math.random() * 360)) * 1.1
@@ -32,12 +31,14 @@ FileIcon.prototype = {
 	},
 
 	bounds: function() {
-		var boundsX = this.canvasWidth - this.image.width * this.scale / 2;
-		var boundsY = this.canvasHeight - this.image.height * this.scale / 2;
-		if (this.x >= boundsX || this.x <= 0) {
+		var registrationPointX = this.image.width * this.scale * 0.5;
+		var registrationPointY = this.image.height * this.scale * 0.5;
+		var boundsX = this.canvas.clientWidth - registrationPointX;
+		var boundsY = this.canvas.clientHeight - registrationPointY;
+		if (this.x >= boundsX || this.x <= registrationPointX) {
 			this.point.x *= -1;
 		}
-		if (this.y >= boundsY || this.y <= 0) {
+		if (this.y >= boundsY || this.y <= registrationPointY) {
 			this.point.y *= -1;
 		}
 		if (this.x > boundsX) {
@@ -46,11 +47,11 @@ FileIcon.prototype = {
 		if (this.y > boundsY) {
 			this.y = boundsY;
 		}
-		if (this.x < 0) {
-			this.x = 0;
+		if (this.x < registrationPointX) {
+			this.x = registrationPointX;
 		}
-		if (this.y < 0) {
-			this.y = 0;
+		if (this.y < registrationPointY) {
+			this.y = registrationPointY;
 		}
 	},
 
@@ -91,9 +92,9 @@ FilesMesh.prototype = {
 
 		this.files = [];
 		this.draw = this.draw.bind(this);
-		for (var id = 0, scale; id < this.options.numFiles; id++){
+		for (var id = 0, scale; id < this.options.numFiles; id++) {
 			scale = Utils.randomRange(this.options.minScale, this.options.maxScale);
-			this.files.push(new FileIcon(this.context, Math.floor(scale * 100) / 100));
+			this.files.push(new FileIcon(this.context, scale));
 		}
 		this.drawFrameID = window.requestAnimationFrame(this.draw);
 	},
@@ -106,10 +107,10 @@ FilesMesh.prototype = {
 
 	bindFiles: function(file, dependencies) {
 		for (var id = 0; id < dependencies.length; id++) {
-			var distance = Utils.distance(file.x, file.y, dependencies[id].x, dependencies[id].y);
+			var dependency = dependencies[id];
+			var distance = Utils.distance(file.x, file.y, dependency.x, dependency.y);
 			var alpha = 1 - distance / this.options.bondDistance;
 			if (alpha) {
-				var dependency = dependencies[id];
 				this.context.lineWidth = 0.5;
 				this.context.strokeStyle = 'rgba('+ this.rgb[0] +','+ this.rgb[1] +','+ this.rgb[2] +','+ alpha +')';
 				this.context.beginPath();
diff --git a/examples/use-relative-path/webpack.config.js b/examples/relative-path-with-single-output/webpack.config.js
similarity index 100%
rename from examples/use-relative-path/webpack.config.js
rename to examples/relative-path-with-single-output/webpack.config.js

From 8e511d7ea504c384791bef161880eada2b39b8e6 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Fri, 21 Apr 2017 18:08:27 -0300
Subject: [PATCH 36/40] chore: recovering the file-loader icon

---
 .github/assets/file_loader_icon.svg           | 68 +++++++++----------
 .../source/styles/desktop.css                 |  2 +-
 .../source/styles/mobile.css                  |  2 +-
 .../source/index.css                          |  2 +-
 .../source/index.js                           |  7 +-
 5 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/.github/assets/file_loader_icon.svg b/.github/assets/file_loader_icon.svg
index c665956..358cfa9 100644
--- a/.github/assets/file_loader_icon.svg
+++ b/.github/assets/file_loader_icon.svg
@@ -1,36 +1,36 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-	<title>file_loader_icon</title>
-	<desc>Created with Sketch.</desc>
-	<defs>
-		<circle id="path-1" cx="64" cy="64" r="64"></circle>
-		<path d="M46,0 L4,0 C1.791,0 0,1.791 0,4 L0,76 C0,78.209 1.791,80 4,80 L60,80 C62.209,80 64,78.209 64,76 L64,18 L46,0 Z" id="path-3"></path>
-	</defs>
-	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-		<g id="file_loader_icon">
-			<circle id="Oval" fill="#EAEFF0" cx="64" cy="64" r="64"></circle>
-			<g id="Background">
-				<mask id="mask-2" fill="white">
-					<use xlink:href="#path-1"></use>
-				</mask>
-				<g id="SVGID_9_"></g>
-				<polygon id="Shape" fill="#D4D7DE" opacity="0.55" mask="url(#mask-2)" points="33.096 102.746 58.351 128 128 128 128 73.888 96 42"></polygon>
-			</g>
-			<path d="M78,24 L36,24 C33.791,24 32,25.791 32,28 L32,100 C32,102.209 33.791,104 36,104 L92,104 C94.209,104 96,102.209 96,100 L96,42 L78,24 Z" id="Shape" fill="#2195CD"></path>
-			<g id="Icon" transform="translate(32.000000, 24.000000)">
-				<mask id="mask-4" fill="white">
-					<use xlink:href="#path-3"></use>
-				</mask>
-				<use id="layer1" fill="#4D9BD8" xlink:href="#path-3"></use>
-				<rect id="bottom" fill="#1C78C0" mask="url(#mask-4)" x="0" y="48" width="64" height="36"></rect>
-				<path d="M52,18 L64,18 L46,0 L46,12 C46,15.314 48.686,18 52,18 Z" id="fold" fill="#8ED6FB" mask="url(#mask-4)"></path>
-			</g>
-			<g id="text" transform="translate(42.000000, 74.000000)" font-size="20" font-family="Roboto-Regular, Roboto" fill="#FFFFFF" font-weight="normal">
-				<text id="file://">
-					<tspan x="0" y="21">file://</tspan>
-				</text>
-			</g>
-		</g>
-	</g>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>file_loader_icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="64" cy="64" r="64"></circle>
+        <path d="M46,0 L4,0 C1.791,0 0,1.791 0,4 L0,76 C0,78.209 1.791,80 4,80 L60,80 C62.209,80 64,78.209 64,76 L64,18 L46,0 Z" id="path-3"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="file_loader_icon">
+            <circle id="Oval" fill="#EAEFF0" cx="64" cy="64" r="64"></circle>
+            <g id="Background">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="SVGID_9_"></g>
+                <polygon id="Shape" fill="#D4D7DE" opacity="0.55" mask="url(#mask-2)" points="33.096 102.746 58.351 128 128 128 128 73.888 96 42"></polygon>
+            </g>
+            <path d="M78,24 L36,24 C33.791,24 32,25.791 32,28 L32,100 C32,102.209 33.791,104 36,104 L92,104 C94.209,104 96,102.209 96,100 L96,42 L78,24 Z" id="Shape" fill="#2195CD"></path>
+            <g id="Icon" transform="translate(32.000000, 24.000000)">
+                <mask id="mask-4" fill="white">
+                    <use xlink:href="#path-3"></use>
+                </mask>
+                <use id="layer1" fill="#4D9BD8" xlink:href="#path-3"></use>
+                <rect id="bottom" fill="#1C78C0" mask="url(#mask-4)" x="0" y="48" width="64" height="36"></rect>
+                <path d="M52,18 L64,18 L46,0 L46,12 C46,15.314 48.686,18 52,18 Z" id="fold" fill="#8ED6FB" mask="url(#mask-4)"></path>
+            </g>
+            <g id="text" transform="translate(42.000000, 74.000000)" font-size="20" font-family="Roboto-Regular, Roboto" fill="#FFFFFF" font-weight="normal">
+                <text id="file://">
+                    <tspan x="0" y="21">file://</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
 </svg>
\ No newline at end of file
diff --git a/examples/relative-path-with-multiple-outputs/source/styles/desktop.css b/examples/relative-path-with-multiple-outputs/source/styles/desktop.css
index d9c1c7b..b0b6180 100644
--- a/examples/relative-path-with-multiple-outputs/source/styles/desktop.css
+++ b/examples/relative-path-with-multiple-outputs/source/styles/desktop.css
@@ -46,5 +46,5 @@ div:before {
   margin-top: 10px;
   margin-left: 10px;
   color: #fff;
-  content: "file-loader / examples / use-relative-path-multiple-output / desktop";
+  content: "file-loader / examples / relative-path-with-multiple-output / desktop";
 }
diff --git a/examples/relative-path-with-multiple-outputs/source/styles/mobile.css b/examples/relative-path-with-multiple-outputs/source/styles/mobile.css
index e3f2ca8..58fb63d 100644
--- a/examples/relative-path-with-multiple-outputs/source/styles/mobile.css
+++ b/examples/relative-path-with-multiple-outputs/source/styles/mobile.css
@@ -46,5 +46,5 @@ div:before {
   margin-top: 10px;
   margin-left: 10px;
   color: #fff;
-  content: "file-loader / examples / use-relative-path-multiple-output / mobile";
+  content: "file-loader / examples / relative-path-with-multiple-output / mobile";
 }
diff --git a/examples/relative-path-with-single-output/source/index.css b/examples/relative-path-with-single-output/source/index.css
index 9a1c03c..d0fc058 100644
--- a/examples/relative-path-with-single-output/source/index.css
+++ b/examples/relative-path-with-single-output/source/index.css
@@ -45,5 +45,5 @@ div:before {
 	margin-top: 10px;
 	margin-left: 10px;
 	color: #fff;
-	content: "file-loader / examples / use-relative-path-single-output";
+	content: "file-loader / examples / relative-path-with-single-output";
 }
diff --git a/examples/relative-path-with-single-output/source/index.js b/examples/relative-path-with-single-output/source/index.js
index d224561..a0fcb54 100644
--- a/examples/relative-path-with-single-output/source/index.js
+++ b/examples/relative-path-with-single-output/source/index.js
@@ -59,10 +59,11 @@ FileIcon.prototype = {
 		var imageX = this.image.width * this.scale;
 		var imageY = this.image.height * this.scale;
 		this.context.drawImage(this.image,
+			0, 0, 128, 128, // source
 			this.x - imageX * 0.5,
 			this.y - imageY * 0.5,
 			imageX,
-			imageY
+			imageY,
 		);
 	},
 };
@@ -78,8 +79,8 @@ FilesMesh.defaults = {
 	lineColor: 'rgb(234, 239, 240)',
 	bondDistance: 300,
 	numFiles: 25,
-	minScale: 0.03,
-	maxScale: 1,
+	minScale: 0.05,
+	maxScale: 0.4,
 };
 
 FilesMesh.prototype = {

From 8ff353f2f5a13495a0759377640096e73409c640 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Fri, 21 Apr 2017 18:51:10 -0300
Subject: [PATCH 37/40] test: cssOutputPath option

---
 test/correct-filename.test.js | 63 ++++++++++++++++++++++++++++++-----
 1 file changed, 55 insertions(+), 8 deletions(-)

diff --git a/test/correct-filename.test.js b/test/correct-filename.test.js
index bd9544c..888d02e 100644
--- a/test/correct-filename.test.js
+++ b/test/correct-filename.test.js
@@ -133,11 +133,9 @@ describe("useRelativePath option", function() {
 	it("should be supported", function() {
 		run_with_options("/this/is/the/context/file.txt", {
 			useRelativePath: true,
-			cssOutputPath: "/this/is/the/context/style",
 			webpackConfig: {
 				_moduleIssuerContext: "/this/is/the/context",
 				output: {
-					path: "/this/is/the/context/dist",
 					filename: "[name].js",
 				},
 			},
@@ -146,11 +144,9 @@ describe("useRelativePath option", function() {
 		);
 		run_with_options("/this/is/file.txt", {
 			useRelativePath: true,
-			cssOutputPath: "/this/is/the/context",
 			webpackConfig: {
 				_moduleIssuerContext: "/this/is/the/context",
 				output: {
-					path: "/this/is/the/context/dist",
 					filename: "[name].js",
 				},
 			},
@@ -159,12 +155,10 @@ describe("useRelativePath option", function() {
 		);
 		run_with_options("/this/file.txt", {
 			useRelativePath: true,
-			cssOutputPath: "/this/is/the/style",
 			context: "/this/is/the/",
 			webpackConfig: {
 				_moduleIssuerContext: "/this/is/the/",
 				output: {
-					path: "/this/is/the/context/dist",
 					filename: "[name].js",
 				},
 			},
@@ -173,12 +167,10 @@ describe("useRelativePath option", function() {
 		);
 		run_with_options("/this/file.txt", {
 			useRelativePath: true,
-			cssOutputPath: "/style",
 			context: "/",
 			webpackConfig: {
 				_moduleIssuerContext: "/",
 				output: {
-					path: "/this/is/the/context/dist",
 					filename: "[name].js",
 				},
 			},
@@ -188,6 +180,61 @@ describe("useRelativePath option", function() {
 	});
 });
 
+describe("cssOutputPath option", function() {
+	it("should be supported", function() {
+		run_with_options("/this/is/the/context/dist/file.txt", {
+			useRelativePath: true,
+			cssOutputPath: "style",
+			webpackConfig: {
+				_moduleIssuerContext: "/this/is/the/context/source",
+				output: {
+					path: "/this/is/the/context/dist",
+				},
+			},
+		}).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"../dist/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+		run_with_options("/this/is/file.txt", {
+			useRelativePath: true,
+			cssOutputPath: "",
+			webpackConfig: {
+				_moduleIssuerContext: "/this/is",
+				output: {
+					path: "/this/is/the/context",
+				},
+			},
+		}).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+		run_with_options("/this/file.txt", {
+			useRelativePath: true,
+			cssOutputPath: "/this/is/the/style",
+			context: "/this/is/the/",
+			webpackConfig: {
+				_moduleIssuerContext: "/this/is/the/",
+				output: {
+					path: "/this/is/the/context/dist",
+				},
+			},
+		}).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"../../../../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+		run_with_options("/this/file.txt", {
+			useRelativePath: true,
+			cssOutputPath: "/style",
+			context: "/",
+			webpackConfig: {
+				_moduleIssuerContext: "/",
+				output: {
+					path: "/this/is/the/context/dist",
+				},
+			},
+		}).result.should.be.eql(
+			'module.exports = __webpack_public_path__ + \"../this/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+		);
+	});
+});
+
 describe("outputPath function", function() {
 	it("should be supported", function() {
 		outputFunc = function(value) {

From 60e3aa3f7907ad9322418af5f5f160a23416f1f3 Mon Sep 17 00:00:00 2001
From: "Adrian C. Miranda" <adriancmiranda@gmail.com>
Date: Fri, 21 Apr 2017 19:28:59 -0300
Subject: [PATCH 38/40] fix: output dirname rule should accept urls like
 ../foo/../bar

---
 examples/build-all.js                                     | 3 ++-
 examples/relative-path-with-single-output/source/index.js | 2 +-
 index.js                                                  | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/build-all.js b/examples/build-all.js
index b40af48..d75061f 100644
--- a/examples/build-all.js
+++ b/examples/build-all.js
@@ -18,5 +18,6 @@ module.exports = Promise.all(stack).then((response) => {
 	return response;
 }).catch((reason) => {
 	spinner.stop();
-	console.error(reason);
+	console.error(reason.stack);
+	process.exit(1);
 });
diff --git a/examples/relative-path-with-single-output/source/index.js b/examples/relative-path-with-single-output/source/index.js
index a0fcb54..a6d57bc 100644
--- a/examples/relative-path-with-single-output/source/index.js
+++ b/examples/relative-path-with-single-output/source/index.js
@@ -63,7 +63,7 @@ FileIcon.prototype = {
 			this.x - imageX * 0.5,
 			this.y - imageY * 0.5,
 			imageX,
-			imageY,
+			imageY
 		);
 	},
 };
diff --git a/index.js b/index.js
index e6205d0..0091d96 100644
--- a/index.js
+++ b/index.js
@@ -50,7 +50,7 @@ module.exports = function(content) {
 		// If the `output.dirname` is pointing to up in relation to the `config.outputPath`.
 		// We forced him to the webpack output path config. Even though it is empty.
 		const output = this.options.output || {};
-		output.dirname = relation.path.replace(/\.\.(\/|\\)/g, "").split(path.sep).join("/");
+		output.dirname = relation.path.replace(/^(\.\.(\/|\\))+/g, "").split(path.sep).join("/");
 		if (output.dirname.indexOf(config.outputPath) !== 0) output.dirname = config.outputPath;
 		config.outputPath = path.join(output.dirname, url).split(path.sep).join("/");
 

From e4b006e0120c54320932607e2703b933cc327634 Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Mon, 8 May 2017 16:20:05 -0300
Subject: [PATCH 39/40] fix: default publicPath

---
 index.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/index.js b/index.js
index 0091d96..704cef7 100644
--- a/index.js
+++ b/index.js
@@ -18,7 +18,7 @@ module.exports = function(content) {
 		regExp: undefined,
 		context: undefined,
 		useRelativePath: false,
-		publicPath: false,
+		publicPath: undefined,
 		cssOutputPath: "",
 		outputPath: "",
 		name: "[hash].[ext]",
@@ -61,7 +61,7 @@ module.exports = function(content) {
 		// on the webpack output path config folder and manually the same with CSS file.
 		if (output.filename && path.extname(output.filename)) {
 			relation.path = output.dirname;
-		} else if (output.path && toString.call(config.cssOutputPath) === "[object String]") {
+		} else if (output.path && is('String', config.cssOutputPath)) {
 			output.bundle = output.path.replace(this.options.context + path.sep, "");
 			output.issuer = path.join(context, output.bundle, config.cssOutputPath);
 			output.asset = path.join(context, output.bundle, output.dirname);
@@ -74,8 +74,7 @@ module.exports = function(content) {
 		config.outputPath = url;
 	}
 
-	if (config.publicPath !== false) {
-		// support functions as publicPath to generate them dynamically
+	if (is('String|Function', config.publicPath)) {
 		config.publicPath = JSON.stringify(parsePath(config.publicPath, url));
 	} else {
 		config.publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`;
@@ -86,6 +85,11 @@ module.exports = function(content) {
 	}
 
 	return `module.exports = ${config.publicPath};`;
+	
+	function is(expected, value) {
+		return new RegExp(`[object ${expected}]`).test(toString.call(value));
+	}
+
 	function parsePath(property, slug) {
 		if (!property) {
 			return slug;

From 1cf0f717e2d055c041292274c3cca0df6b65d1fc Mon Sep 17 00:00:00 2001
From: Adrian Miranda <adriancmiranda@gmail.com>
Date: Mon, 8 May 2017 16:27:48 -0300
Subject: [PATCH 40/40] fix: default publicPath

---
 index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 704cef7..a891781 100644
--- a/index.js
+++ b/index.js
@@ -75,6 +75,7 @@ module.exports = function(content) {
 	}
 
 	if (is('String|Function', config.publicPath)) {
+		// support functions as publicPath to generate them dynamically
 		config.publicPath = JSON.stringify(parsePath(config.publicPath, url));
 	} else {
 		config.publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`;
@@ -87,7 +88,7 @@ module.exports = function(content) {
 	return `module.exports = ${config.publicPath};`;
 	
 	function is(expected, value) {
-		return new RegExp(`[object ${expected}]`).test(toString.call(value));
+		return new RegExp(`(${expected})`).test(toString.call(value));
 	}
 
 	function parsePath(property, slug) {