perf: migrate from extract-text plugin to mini-css plugin

jantimon · Oct 2, 2018 · 79a0448 · 79a0448
1 parent 62e638c
commit 79a0448
Show file tree

Hide file tree

Showing 60 changed files with 737 additions and 493 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -3,14 +3,9 @@ node_js:
   - stable
   - lts/*
   - 6.9
-env:
-  - WEBPACK_VERSION=4.0.0 EXTRACT_PLUGIN_VERSION=4.0.0-alpha.0
 before_install:
   - stty columns 120
 install:
   - travis_retry npm install --ignore-scripts
-  - npm rm webpack
-  - npm rm extract-text-webpack-plugin
-  - npm install webpack@$WEBPACK_VERSION extract-text-webpack-plugin@$EXTRACT_PLUGIN_VERSION --ignore-scripts || true
 script:
   - travis_retry npm test
diff --git a/README.md b/README.md
@@ -218,7 +218,7 @@ plugins: [
 ```
 
 If you already have a template loader, you can use it to parse the template.
-Please note that this will also happen if you specifiy the html-loader and use `.html` file as template.
+Please note that this will also happen if you specify the html-loader and use `.html` file as template.
 
 **webpack.config.js**
 ```js

diff --git a/examples/appcache/dist/webpack-4/bundle.js b/examples/appcache/dist/webpack-4/bundle.js
@@ -36,19 +36,34 @@
 /******/ 	// define getter function for harmony exports
 /******/ 	__webpack_require__.d = function(exports, name, getter) {
 /******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 /******/ 		}
 /******/ 	};
 /******/
 /******/ 	// define __esModule on exports
 /******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
 /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 /******/ 	};
 /******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
 /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 /******/ 	__webpack_require__.n = function(module) {
 /******/ 		var getter = module && module.__esModule ?
@@ -73,20 +88,17 @@
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(4);
+__webpack_require__(1);
 var h1 = document.createElement('h1');
 h1.innerHTML = 'Hello world!';
 document.body.appendChild(h1);
 
 
 /***/ }),
-/* 1 */,
-/* 2 */,
-/* 3 */,
-/* 4 */
-/***/ (function(module, exports) {
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
 
-// removed by extract-text-webpack-plugin
+// extracted by mini-css-extract-plugin
 
 /***/ })
 /******/ ]);
diff --git a/examples/appcache/dist/webpack-4/manifest.appcache b/examples/appcache/dist/webpack-4/manifest.appcache
@@ -1,9 +1,9 @@
 CACHE MANIFEST
-# 83ab7029cec7797a5a8a
+# b399a5e3b098d84ca3a0
 
 0714810ae3fb211173e2964249507195.png
-bundle.js
 styles.css
+bundle.js
 
 NETWORK:
 *
diff --git a/examples/appcache/dist/webpack-4/styles.css b/examples/appcache/dist/webpack-4/styles.css
@@ -1,3 +1,3 @@
 body {
   background: snow;
-}
+}
diff --git a/examples/appcache/webpack.config.js b/examples/appcache/webpack.config.js
@@ -1,7 +1,7 @@
 var path = require('path');
 var AppCachePlugin = require('appcache-webpack-plugin');
 var HtmlWebpackPlugin = require('../..');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];
 
 module.exports = {
@@ -14,7 +14,7 @@ module.exports = {
   },
   module: {
     rules: [
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
+      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
       { test: /\.png$/, loader: 'file-loader' },
       { test: /\.html$/, loader: 'html-loader?-removeOptionalTags' }
     ]
@@ -29,6 +29,6 @@ module.exports = {
         collapseWhitespace: true
       }
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'styles.css' })
   ]
 };
diff --git a/examples/chunk-optimization/dist/webpack-4/entryA.js b/examples/chunk-optimization/dist/webpack-4/entryA.js
@@ -2,8 +2,9 @@
 /******/ 	// install a JSONP callback for chunk loading
 /******/ 	function webpackJsonpCallback(data) {
 /******/ 		var chunkIds = data[0];
-/******/ 		var moreModules = data[1]
+/******/ 		var moreModules = data[1];
 /******/ 		var executeModules = data[2];
+/******/
 /******/ 		// add "moreModules" to the modules object,
 /******/ 		// then flag all "chunkIds" as loaded and fire callback
 /******/ 		var moduleId, chunkId, i = 0, resolves = [];
@@ -20,6 +21,7 @@
 /******/ 			}
 /******/ 		}
 /******/ 		if(parentJsonpFunction) parentJsonpFunction(data);
+/******/
 /******/ 		while(resolves.length) {
 /******/ 			resolves.shift()();
 /******/ 		}
@@ -34,12 +36,12 @@
 /******/ 		var result;
 /******/ 		for(var i = 0; i < deferredModules.length; i++) {
 /******/ 			var deferredModule = deferredModules[i];
-/******/ 			var fullfilled = true;
+/******/ 			var fulfilled = true;
 /******/ 			for(var j = 1; j < deferredModule.length; j++) {
 /******/ 				var depId = deferredModule[j];
-/******/ 				if(installedChunks[depId] !== 0) fullfilled = false;
+/******/ 				if(installedChunks[depId] !== 0) fulfilled = false;
 /******/ 			}
-/******/ 			if(fullfilled) {
+/******/ 			if(fulfilled) {
 /******/ 				deferredModules.splice(i--, 1);
 /******/ 				result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
 /******/ 			}
@@ -51,8 +53,10 @@
 /******/ 	var installedModules = {};
 /******/
 /******/ 	// object to store loaded and loading chunks
+/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 	// Promise = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		5: 0
+/******/ 		3: 0
 /******/ 	};
 /******/
 /******/ 	var deferredModules = [];
@@ -91,19 +95,34 @@
 /******/ 	// define getter function for harmony exports
 /******/ 	__webpack_require__.d = function(exports, name, getter) {
 /******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 /******/ 		}
 /******/ 	};
 /******/
 /******/ 	// define __esModule on exports
 /******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
 /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 /******/ 	};
 /******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
 /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 /******/ 	__webpack_require__.n = function(module) {
 /******/ 		var getter = module && module.__esModule ?
@@ -128,19 +147,19 @@
 /******/
 /******/
 /******/ 	// add entry module to deferred list
-/******/ 	deferredModules.push([8,2,3,1,0]);
+/******/ 	deferredModules.push([2,0,5,1,2]);
 /******/ 	// run deferred modules when ready
 /******/ 	return checkDeferredModules();
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 8:
+/***/ 2:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(1);
-var multiply = __webpack_require__(0);
-var concat = __webpack_require__(3);
+__webpack_require__(0);
+var multiply = __webpack_require__(1);
+var concat = __webpack_require__(7);
 var h1 = document.createElement('h1');
 h1.innerHTML = concat('Hello world from Entry ', multiply(1, 1));
 document.body.appendChild(h1);

diff --git a/examples/chunk-optimization/dist/webpack-4/entryA~entryB.js b/examples/chunk-optimization/dist/webpack-4/entryA~entryB.js
@@ -1,12 +1,11 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
-
-/***/ 1:
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
+/* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(7);
+var content = __webpack_require__(3);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // add the styles to the DOM
 var update = __webpack_require__(5)(content, {});
@@ -15,11 +14,12 @@ if(content.locals) module.exports = content.locals;
 if(false) {}
 
 /***/ }),
-
-/***/ 7:
+/* 1 */,
+/* 2 */,
+/* 3 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(6)();
+exports = module.exports = __webpack_require__(4)();
 // imports
 
 
@@ -30,5 +30,4 @@ exports.push([module.i, "body {\n  background: snow;\n}", ""]);
 
 
 /***/ })
-
-}]);
+]]);
diff --git a/examples/chunk-optimization/dist/webpack-4/entryB.js b/examples/chunk-optimization/dist/webpack-4/entryB.js
@@ -2,8 +2,9 @@
 /******/ 	// install a JSONP callback for chunk loading
 /******/ 	function webpackJsonpCallback(data) {
 /******/ 		var chunkIds = data[0];
-/******/ 		var moreModules = data[1]
+/******/ 		var moreModules = data[1];
 /******/ 		var executeModules = data[2];
+/******/
 /******/ 		// add "moreModules" to the modules object,
 /******/ 		// then flag all "chunkIds" as loaded and fire callback
 /******/ 		var moduleId, chunkId, i = 0, resolves = [];
@@ -20,6 +21,7 @@
 /******/ 			}
 /******/ 		}
 /******/ 		if(parentJsonpFunction) parentJsonpFunction(data);
+/******/
 /******/ 		while(resolves.length) {
 /******/ 			resolves.shift()();
 /******/ 		}
@@ -34,12 +36,12 @@
 /******/ 		var result;
 /******/ 		for(var i = 0; i < deferredModules.length; i++) {
 /******/ 			var deferredModule = deferredModules[i];
-/******/ 			var fullfilled = true;
+/******/ 			var fulfilled = true;
 /******/ 			for(var j = 1; j < deferredModule.length; j++) {
 /******/ 				var depId = deferredModule[j];
-/******/ 				if(installedChunks[depId] !== 0) fullfilled = false;
+/******/ 				if(installedChunks[depId] !== 0) fulfilled = false;
 /******/ 			}
-/******/ 			if(fullfilled) {
+/******/ 			if(fulfilled) {
 /******/ 				deferredModules.splice(i--, 1);
 /******/ 				result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
 /******/ 			}
@@ -51,6 +53,8 @@
 /******/ 	var installedModules = {};
 /******/
 /******/ 	// object to store loaded and loading chunks
+/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 	// Promise = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
 /******/ 		4: 0
 /******/ 	};
@@ -91,19 +95,34 @@
 /******/ 	// define getter function for harmony exports
 /******/ 	__webpack_require__.d = function(exports, name, getter) {
 /******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 /******/ 		}
 /******/ 	};
 /******/
 /******/ 	// define __esModule on exports
 /******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
 /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 /******/ 	};
 /******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
 /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 /******/ 	__webpack_require__.n = function(module) {
 /******/ 		var getter = module && module.__esModule ?
@@ -128,18 +147,18 @@
 /******/
 /******/
 /******/ 	// add entry module to deferred list
-/******/ 	deferredModules.push([2,2,1,0]);
+/******/ 	deferredModules.push([8,0,1,2]);
 /******/ 	// run deferred modules when ready
 /******/ 	return checkDeferredModules();
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 2:
+/***/ 8:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(1);
-var multiply = __webpack_require__(0);
+__webpack_require__(0);
+var multiply = __webpack_require__(1);
 var h1 = document.createElement('h1');
 h1.innerHTML = 'Hello world from Entry ' + multiply(1, 2);
 document.body.appendChild(h1);