feat - Use use/fallback pair at extract over loader/fallbackLoader`

Closes #382.

Author: bebraw

README.md

@@ -34,8 +34,8 @@ module.exports = {
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
-          fallbackLoader: "style-loader",
-          loader: "css-loader"
+          fallback: "style-loader",
+          use: "css-loader"
         })
       }
     ]
@@ -85,8 +85,8 @@ Creates an extracting loader from an existing loader. Supports loaders of type `
 
 |Name|Type|Description|
 |:--:|:--:|:----------|
-|**`options.loader`**|`{String}`/`{Object}`|Loader(s) that should be used for converting the resource to a CSS exporting module _(required)_|
-|**`options.fallbackLoader`**|`{String}`/`{Object}`|loader(e.g `'style-loader'`) that should be used when the CSS is not extracted (i.e. in an additional chunk when `allChunks: false`)|
+|**`options.use`**|`{String}`/`{Object}`|Loader(s) that should be used for converting the resource to a CSS exporting module _(required)_|
+|**`options.fallback`**|`{String}`/`{Object}`|loader(e.g `'style-loader'`) that should be used when the CSS is not extracted (i.e. in an additional chunk when `allChunks: false`)|
 |**`options.publicPath`**|`{String}`|Override the `publicPath` setting for this loader|
 
 

example/dep.js

@@ -1,2 +1,2 @@
 require("./style2.css");
-require(["./dep2"]);
+require(["./dep2"]);

example/dep2.js

@@ -1 +1 @@
-require("./style3.css");
+require("./style3.css");

example/entry.js

@@ -1,3 +1,3 @@
 require("./common.css");
 require("./style.css");
-require("./dep");
+require("./dep");

example/webpack.config.js

@@ -14,8 +14,8 @@ module.exports = {
 	module: {
 		loaders: [
 			{ test: /\.css$/, use: ExtractTextPlugin.extract({
-				fallbackLoader: "style-loader",
-				loader: "css-loader?sourceMap",
+				fallback: "style-loader",
+				use: "css-loader?sourceMap",
 				publicPath: "../"
 			}) },
 			{ test: /\.png$/, loader: "file-loader" }

index.js

@@ -10,7 +10,7 @@ var Chunk = require("webpack/lib/Chunk");
 var OrderUndefinedError = require("./OrderUndefinedError");
 var loaderUtils = require("loader-utils");
 var schemaTester = require('./schema/validator');
-var loaderSchema = require('./schema/loader-schema.json');
+var loaderSchema = require('./schema/loader-schema');
 var pluginSchema = require('./schema/plugin-schema.json');
 
 var NS = fs.realpathSync(__dirname);
@@ -178,19 +178,25 @@ ExtractTextPlugin.prototype.extract = function(options) {
 						"Example: if your old code looked like this:\n" +
 						"    ExtractTextPlugin.extract('style-loader', 'css-loader')\n\n" +
 						"You would change it to:\n" +
-						"    ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' })\n\n" +
+						"    ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })\n\n" +
 						"The available options are:\n" +
-						"    loader: string | object | loader[]\n" +
-						"    fallbackLoader: string | object | loader[]\n" +
+						"    use: string | object | loader[]\n" +
+						"    fallback: string | object | loader[]\n" +
 						"    publicPath: string\n");
 	}
+	if(options.fallbackLoader) {
+		console.warn('fallbackLoader option has been deprecated - replace with "fallback"');
+	}
+	if(options.loader) {
+		console.warn('loader option has been deprecated - replace with "use"');
+	}
 	if(Array.isArray(options) || isString(options) || typeof options.options === "object" || typeof options.query === 'object') {
 		options = { loader: options };
 	} else {
 		schemaTester(loaderSchema, options);
 	}
-	var loader = options.loader;
-	var before = options.fallbackLoader || [];
+	var loader = options.use ||  options.loader;
+	var before = options.fallback || options.fallbackLoader || [];
 	if(isString(loader)) {
 		loader = loader.split("!");
 	}
@@ -201,6 +207,8 @@ ExtractTextPlugin.prototype.extract = function(options) {
 	}
 	options = mergeOptions({omit: before.length, remove: true}, options);
 	delete options.loader;
+	delete options.use;
+	delete options.fallback;
 	delete options.fallbackLoader;
 	return [this.loader(options)]
 		.concat(before, loader)

schema/loader-schema.json renamed to schema/loader-schema.js

@@ -1,4 +1,4 @@
-{
+module.exports = {
 	"$schema": "http://json-schema.org/draft-04/schema#",
 	"type": "object",
 	"additionalProperties": false,
@@ -7,9 +7,13 @@
 		"disable": { "type": "boolean" },
 		"omit": { "type": "boolean" },
 		"remove": { "type": "boolean" },
-		"fallbackLoader": { "type": ["string", "array", "object"] },
+		"fallback": { "type": ["string", "array", "object"] },
 		"filename": { "type": "string" },
-		"loader": { "type": ["string", "array", "object"] },
-		"publicPath": { "type": "string" }
+		"use": { "type": ["string", "array", "object"] },
+		"publicPath": { "type": "string" },
+
+		// deprecated
+		"fallbackLoader": { "type": ["string", "array", "object"] },
+		"loader": { "type": ["string", "array", "object"] }
 	}
-}
+};

schema/plugin-schema.json

@@ -11,7 +11,7 @@
       "description": "",
       "type": "boolean"
     },
-    "fallbackLoader": {
+    "fallback": {
       "description": "A loader that webpack can fall back to if the original one fails.",
       "modes": {
         "type": "string",

test/cases/simple-query-object/webpack.config.js

@@ -4,8 +4,8 @@ module.exports = {
 	module: {
 		loaders: [
 			{ test: /\.css$/, use: ExtractTextPlugin.extract({
-				fallbackLoader: "style-loader",
-				loader: { loader: "css-loader", options: {
+				fallback: "style-loader",
+				use: { loader: "css-loader", options: {
 					sourceMap: true
 				} }
 			}) }

test/cases/simple-queryless-object/webpack.config.js

@@ -4,8 +4,8 @@ module.exports = {
 	module: {
 		loaders: [
 			{ test: /\.css$/, use: ExtractTextPlugin.extract({
-				fallbackLoader: { loader: "style-loader" },
-				loader: { loader: "css-loader", options: {
+				fallback: { loader: "style-loader" },
+				use: { loader: "css-loader", options: {
 					sourceMap: true
 				} }
 			}) }

test/extract.test.js

@@ -19,7 +19,7 @@ describe("ExtractTextPlugin.extract()", function() {
 
 		it("does not throw if a correct config object is passed in", function() {
 			should.doesNotThrow(function() {
-				ExtractTextPlugin.extract({loader: 'css-loader'});
+				ExtractTextPlugin.extract({use: 'css-loader'});
 			});
 		});
 
@@ -66,22 +66,31 @@ describe("ExtractTextPlugin.extract()", function() {
 		});
 
 		it("accepts a loader object", function() {
-			ExtractTextPlugin.extract({ loader: "css-loader" }).should.deepEqual([
+			ExtractTextPlugin.extract({ use: "css-loader" }).should.deepEqual([
 				{ loader: loaderPath, options: { omit: 0, remove:true } },
 				{ loader: "css-loader" }
 			]);
 		});
 
 		it("accepts a loader object with an options object", function() {
 			ExtractTextPlugin.extract(
-				{ loader: "css-loader", options: { modules: true } }
+				{ use: "css-loader", options: { modules: true } }
 			).should.deepEqual([
 				{ loader: loaderPath, options: { omit: 0, remove:true } },
-				{ loader: "css-loader", options: { modules: true } }
+				{ use: "css-loader", options: { modules: true } }
 			]);
 		});
 
 		it("accepts a loader object with a (legacy) query object", function() {
+			ExtractTextPlugin.extract(
+				{ use: "css-loader", query: { modules: true } }
+			).should.deepEqual([
+				{ loader: loaderPath, options: { omit: 0, remove:true } },
+				{ use: "css-loader", query: { modules: true } }
+			]);
+		});
+
+		it("accepts a loader object with a legacy loader field", function() {
 			ExtractTextPlugin.extract(
 				{ loader: "css-loader", query: { modules: true } }
 			).should.deepEqual([
@@ -104,22 +113,33 @@ describe("ExtractTextPlugin.extract()", function() {
 		});
 	})
 
-	context("specifying fallbackLoader", function() {
-		it("accepts a fallbackLoader string", function() {
+	context("specifying fallback", function() {
+		it("accepts a fallback string", function() {
+			ExtractTextPlugin.extract({
+				fallback: "style-loader",
+				use: "css-loader"
+			}).should.deepEqual([
+				{ loader: loaderPath, options: { omit: 1, remove: true } },
+				{ loader: "style-loader" },
+				{ loader: "css-loader" }
+			]);
+		});
+
+		it("accepts a fallback string with legacy fallbackLoader option", function() {
 			ExtractTextPlugin.extract({
 				fallbackLoader: "style-loader",
-				loader: "css-loader"
+				use: "css-loader"
 			}).should.deepEqual([
 				{ loader: loaderPath, options: { omit: 1, remove: true } },
 				{ loader: "style-loader" },
 				{ loader: "css-loader" }
 			]);
 		});
 
-		it("accepts a chained fallbackLoader string", function() {
+		it("accepts a chained fallback string", function() {
 			ExtractTextPlugin.extract({
-				fallbackLoader: "something-loader!style-loader",
-				loader: "css-loader"
+				fallback: "something-loader!style-loader",
+				use: "css-loader"
 			}).should.deepEqual([
 				{ loader: loaderPath, options: { omit: 2, remove: true } },
 				{ loader: "something-loader" },
@@ -128,24 +148,24 @@ describe("ExtractTextPlugin.extract()", function() {
 			]);
 		});
 
-		it("accepts a fallbackLoader object", function() {
+		it("accepts a fallback object", function() {
 		 	ExtractTextPlugin.extract({
-				fallbackLoader: { loader: "style-loader" },
-				loader: "css-loader"
+				fallback: { loader: "style-loader" },
+				use: "css-loader"
 			}).should.deepEqual([
 				{ loader: loaderPath, options: { omit: 1, remove: true } },
 				{ loader: "style-loader" },
 				{ loader: "css-loader" }
 			]);
 		});
 
-		it("accepts an array of fallbackLoader objects", function() {
+		it("accepts an array of fallback objects", function() {
 			ExtractTextPlugin.extract({
-				fallbackLoader: [
+				fallback: [
 					{ loader: "something-loader" },
 					{ loader: "style-loader" }
 				],
-				loader: "css-loader"
+				use: "css-loader"
 			 }).should.deepEqual([
 				{ loader: loaderPath, options: { omit: 2, remove: true } },
 				{ loader: "something-loader" },
@@ -157,8 +177,8 @@ describe("ExtractTextPlugin.extract()", function() {
 
 	it("passes additional options to its own loader", function() {
 		ExtractTextPlugin.extract({
-			fallbackLoader: "style-loader",
-			loader: "css-loader",
+			fallback: "style-loader",
+			use: "css-loader",
 			publicPath: "/test"
 		}).should.deepEqual([
 			{ loader: loaderPath, options: { omit: 1, remove: true, publicPath: "/test" } },