fixed async loading (keep original style loader in async chunks)

Author: BowlingX

index.js

@@ -278,17 +278,24 @@ ExtractTextPlugin.prototype.apply = function(compiler) {
 						var wasExtracted = Array.isArray(meta.content);
 						if(shouldExtract !== wasExtracted) {
 							// don't remove
-							module.loaders[0].options.remove = !shouldExtract;
-							module[NS + "/extract"] = shouldExtract; // eslint-disable-line no-path-concat
-							compilation.rebuildModule(module, function(err) {
+							var newModule = new NormalModule(
+								module.request,
+								module.userRequest,
+								module.rawRequest,
+								module.loaders,
+								module.resource,
+								module.parser
+							);
+							newModule[NS + "/extract"] = shouldExtract; // eslint-disable-line no-path-concat
+							compilation.buildModule(newModule, false, newModule, null, function(err) {
 								if(err) {
 									compilation.errors.push(err);
 									return callback();
 								}
-								meta = module[NS];
+								meta = newModule[NS];
 								// Error out if content is not an array and is not null
 								if(!Array.isArray(meta.content) && meta.content != null) {
-									err = new Error(module.identifier() + " doesn't export content");
+									err = new Error(newModule.identifier() + " doesn't export content");
 									compilation.errors.push(err);
 									return callback();
 								}
@@ -299,8 +306,13 @@ ExtractTextPlugin.prototype.apply = function(compiler) {
 									if(toRemoveModules[ident]) {
 										toRemoveModules[ident].chunks.push(chunk)
 									} else {
-										toRemoveModules[ident] = { module: module, chunks: [chunk] };
+										toRemoveModules[ident] = {
+											module: newModule,
+											moduleToRemove: module,
+											chunks: [chunk]
+										};
 									}
+
 								}
 								callback();
 							});
@@ -345,11 +357,13 @@ ExtractTextPlugin.prototype.apply = function(compiler) {
 						module.parser
 					);
 					newModule.id = id;
-					var localsMatch = module._source._value.match(/exports\.locals([\s\S]*};)/);
-					localsMatch = localsMatch ? 'module.exports = '+localsMatch[0] : null;
-					newModule._source = new OriginalSource('// removed by extract-text-webpack-plugin\n'+(localsMatch||''));
+					newModule._source = data.module._source;
 					data.chunks.forEach(function (chunk) {
-						chunk.removeModule(module);
+						chunk.removeModule(data.moduleToRemove);
+						var deps = data.moduleToRemove.dependencies.slice();
+						deps.forEach(d => {
+							chunk.removeModule(d.module);
+						});
 						chunk.addModule(newModule);
 					});
 				}

test/cases/multiple-entries-async/expected/0.js

@@ -1,30 +1,62 @@
 webpackJsonp([0],{
 
-/***/ 3:
+/***/ 11:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(8);
-
-modules.export = function() {
-	return 'Route Homepage';
-};
-
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(13);
+if(typeof content === 'string') content = [[module.i, content, '']];
+// Prepare cssTransformation
+var transform;
+
+var options = {}
+options.transform = transform
+// add the styles to the DOM
+var update = __webpack_require__(1)(content, options);
+if(content.locals) module.exports = content.locals;
+// Hot Module Replacement
+if(false) {
+	// When the styles change, update the <style> tags
+	if(!content.locals) {
+		module.hot.accept("!!../../../../../node_modules/css-loader/index.js??ref--0-2!./styles.css", function() {
+			var newContent = require("!!../../../../../node_modules/css-loader/index.js??ref--0-2!./styles.css");
+			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+			update(newContent);
+		});
+	}
+	// When the module is disposed, remove the <style> tags
+	module.hot.dispose(function() { update(); });
+}
 
 /***/ }),
 
-/***/ 8:
+/***/ 13:
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
 // imports
 
 
 // module
-exports.push([module.i, ".homepage {\n\tcolor: black;\n}\n", ""]);
+exports.push([module.i, ".homepage {\n\tcolor: yellow;\n}\n", ""]);
 
 // exports
 
 
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(11);
+
+modules.export = function() {
+	return 'Route Homepage';
+};
+
+
 /***/ })
 
 });

test/cases/multiple-entries-async/expected/1.js

@@ -1,18 +1,38 @@
 webpackJsonp([1],{
 
-/***/ 2:
+/***/ 10:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(7);
-
-modules.export = function() {
-	return 'Route Contact';
-};
-
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(12);
+if(typeof content === 'string') content = [[module.i, content, '']];
+// Prepare cssTransformation
+var transform;
+
+var options = {}
+options.transform = transform
+// add the styles to the DOM
+var update = __webpack_require__(1)(content, options);
+if(content.locals) module.exports = content.locals;
+// Hot Module Replacement
+if(false) {
+	// When the styles change, update the <style> tags
+	if(!content.locals) {
+		module.hot.accept("!!../../../../../node_modules/css-loader/index.js??ref--0-2!./styles.css", function() {
+			var newContent = require("!!../../../../../node_modules/css-loader/index.js??ref--0-2!./styles.css");
+			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+			update(newContent);
+		});
+	}
+	// When the module is disposed, remove the <style> tags
+	module.hot.dispose(function() { update(); });
+}
 
 /***/ }),
 
-/***/ 7:
+/***/ 12:
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -25,6 +45,18 @@ exports.push([module.i, ".contact {\n\tcolor: black;\n}\n", ""]);
 // exports
 
 
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(10);
+
+modules.export = function() {
+	return 'Route Contact';
+};
+
+
 /***/ })
 
 });

test/cases/multiple-entries-async/expected/homepage.css

@@ -2,5 +2,5 @@ body {
 	background: red;
 }
 .homepage {
-	color: black;
+	color: yellow;
 }

test/cases/multiple-entries-async/routes/homepage/styles.css

@@ -1,3 +1,3 @@
 .homepage {
-	color: black;
+	color: yellow;
 }