diff --git a/.travis.yml b/.travis.yml
index 15a70d10..b4267b3e 100644
--- 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
index 2045e9a4..d7875e79 100644
--- 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
index 53bdab35..9fbb4892 100644
--- 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
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/appcache/dist/webpack-4/manifest.appcache b/examples/appcache/dist/webpack-4/manifest.appcache
index 0f3a560d..5b72cadb 100644
--- 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
index 232a2cdb..e86486ba 100644
--- a/examples/appcache/dist/webpack-4/styles.css
+++ b/examples/appcache/dist/webpack-4/styles.css
@@ -1,3 +1,3 @@
 body {
   background: snow;
-}
\ No newline at end of file
+}
diff --git a/examples/appcache/webpack.config.js b/examples/appcache/webpack.config.js
index b1214f0f..980ebfd5 100755
--- 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
index fbb9ffa5..c1396195 100644
--- 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
index 10865bc3..7951deeb 100644
--- 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}", ""]);
 
 
 /***/ })
-
-}]);
\ No newline at end of file
+]]);
\ No newline at end of file
diff --git a/examples/chunk-optimization/dist/webpack-4/entryB.js b/examples/chunk-optimization/dist/webpack-4/entryB.js
index 554db790..782ab332 100644
--- 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);
diff --git a/examples/chunk-optimization/dist/webpack-4/libMath.js b/examples/chunk-optimization/dist/webpack-4/libMath.js
index c96fd4e2..387c48de 100644
--- a/examples/chunk-optimization/dist/webpack-4/libMath.js
+++ b/examples/chunk-optimization/dist/webpack-4/libMath.js
@@ -1,8 +1,9 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
-/* 0 */
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
+
+/***/ 1:
 /***/ (function(module, exports, __webpack_require__) {
 
-var sum = __webpack_require__(4);
+var sum = __webpack_require__(6);
 module.exports = function multiply (a, b) {
   var m = 0;
   for (var i = 0; i < a; i = sum(i, 1)) {
@@ -13,10 +14,8 @@ module.exports = function multiply (a, b) {
 
 
 /***/ }),
-/* 1 */,
-/* 2 */,
-/* 3 */,
-/* 4 */
+
+/***/ 6:
 /***/ (function(module, exports) {
 
 module.exports = function sum (a, b) {
@@ -25,4 +24,5 @@ module.exports = function sum (a, b) {
 
 
 /***/ })
-]]);
\ No newline at end of file
+
+}]);
\ No newline at end of file
diff --git a/examples/chunk-optimization/dist/webpack-4/libText.js b/examples/chunk-optimization/dist/webpack-4/libText.js
index ea5f1d72..825c020a 100644
--- a/examples/chunk-optimization/dist/webpack-4/libText.js
+++ b/examples/chunk-optimization/dist/webpack-4/libText.js
@@ -1,6 +1,6 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[5],{
 
-/***/ 3:
+/***/ 7:
 /***/ (function(module, exports) {
 
 module.exports = function concat (a, b) {
diff --git a/examples/chunk-optimization/dist/webpack-4/vendors~entryA~entryB.js b/examples/chunk-optimization/dist/webpack-4/vendors~entryA~entryB.js
index 173043c5..1ef6b018 100644
--- a/examples/chunk-optimization/dist/webpack-4/vendors~entryA~entryB.js
+++ b/examples/chunk-optimization/dist/webpack-4/vendors~entryA~entryB.js
@@ -1,5 +1,62 @@
 (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
 
+/***/ 4:
+/***/ (function(module, exports) {
+
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+// css base code, injected by the css-loader
+module.exports = function() {
+	var list = [];
+
+	// return the list of modules as css string
+	list.toString = function toString() {
+		var result = [];
+		for(var i = 0; i < this.length; i++) {
+			var item = this[i];
+			if(item[2]) {
+				result.push("@media " + item[2] + "{" + item[1] + "}");
+			} else {
+				result.push(item[1]);
+			}
+		}
+		return result.join("");
+	};
+
+	// import a list of modules into the list
+	list.i = function(modules, mediaQuery) {
+		if(typeof modules === "string")
+			modules = [[null, modules, ""]];
+		var alreadyImportedModules = {};
+		for(var i = 0; i < this.length; i++) {
+			var id = this[i][0];
+			if(typeof id === "number")
+				alreadyImportedModules[id] = true;
+		}
+		for(i = 0; i < modules.length; i++) {
+			var item = modules[i];
+			// skip already imported module
+			// this implementation is not 100% perfect for weird media query combinations
+			//  when a module is imported multiple times with different media queries.
+			//  I hope this will never occur (Hey this way we have smaller bundles)
+			if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
+				if(mediaQuery && !item[2]) {
+					item[2] = mediaQuery;
+				} else if(mediaQuery) {
+					item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
+				}
+				list.push(item);
+			}
+		}
+	};
+	return list;
+};
+
+
+/***/ }),
+
 /***/ 5:
 /***/ (function(module, exports) {
 
@@ -251,63 +308,6 @@ function updateLink(linkElement, obj) {
 }
 
 
-/***/ }),
-
-/***/ 6:
-/***/ (function(module, exports) {
-
-/*
-	MIT License http://www.opensource.org/licenses/mit-license.php
-	Author Tobias Koppers @sokra
-*/
-// css base code, injected by the css-loader
-module.exports = function() {
-	var list = [];
-
-	// return the list of modules as css string
-	list.toString = function toString() {
-		var result = [];
-		for(var i = 0; i < this.length; i++) {
-			var item = this[i];
-			if(item[2]) {
-				result.push("@media " + item[2] + "{" + item[1] + "}");
-			} else {
-				result.push(item[1]);
-			}
-		}
-		return result.join("");
-	};
-
-	// import a list of modules into the list
-	list.i = function(modules, mediaQuery) {
-		if(typeof modules === "string")
-			modules = [[null, modules, ""]];
-		var alreadyImportedModules = {};
-		for(var i = 0; i < this.length; i++) {
-			var id = this[i][0];
-			if(typeof id === "number")
-				alreadyImportedModules[id] = true;
-		}
-		for(i = 0; i < modules.length; i++) {
-			var item = modules[i];
-			// skip already imported module
-			// this implementation is not 100% perfect for weird media query combinations
-			//  when a module is imported multiple times with different media queries.
-			//  I hope this will never occur (Hey this way we have smaller bundles)
-			if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
-				if(mediaQuery && !item[2]) {
-					item[2] = mediaQuery;
-				} else if(mediaQuery) {
-					item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
-				}
-				list.push(item);
-			}
-		}
-	};
-	return list;
-};
-
-
 /***/ })
 
 }]);
\ No newline at end of file
diff --git a/examples/chunk-optimization/webpack.config.js b/examples/chunk-optimization/webpack.config.js
index 37c02387..483d9e39 100755
--- a/examples/chunk-optimization/webpack.config.js
+++ b/examples/chunk-optimization/webpack.config.js
@@ -1,6 +1,7 @@
 var path = require('path');
 var HtmlWebpackPlugin = require('../..');
 var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];
+
 module.exports = {
   context: __dirname,
   entry: {
diff --git a/examples/custom-template/dist/webpack-4/bundle.js b/examples/custom-template/dist/webpack-4/bundle.js
index 53bdab35..9fbb4892 100644
--- a/examples/custom-template/dist/webpack-4/bundle.js
+++ b/examples/custom-template/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
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/custom-template/dist/webpack-4/index.html b/examples/custom-template/dist/webpack-4/index.html
index 104823b1..5d3f20fe 100644
--- a/examples/custom-template/dist/webpack-4/index.html
+++ b/examples/custom-template/dist/webpack-4/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="style.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/examples/custom-template/dist/webpack-4/styles.css b/examples/custom-template/dist/webpack-4/style.css
similarity index 93%
rename from examples/custom-template/dist/webpack-4/styles.css
rename to examples/custom-template/dist/webpack-4/style.css
index 232a2cdb..e86486ba 100644
--- a/examples/custom-template/dist/webpack-4/styles.css
+++ b/examples/custom-template/dist/webpack-4/style.css
@@ -1,3 +1,3 @@
 body {
   background: snow;
-}
\ No newline at end of file
+}
diff --git a/examples/custom-template/webpack.config.js b/examples/custom-template/webpack.config.js
index 7d604271..86b820cd 100755
--- a/examples/custom-template/webpack.config.js
+++ b/examples/custom-template/webpack.config.js
@@ -1,6 +1,6 @@
 var path = require('path');
 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 = {
@@ -13,7 +13,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' }
     ]
   },
@@ -21,6 +21,6 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'template.html'
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'style.css' })
   ]
 };
diff --git a/examples/default/dist/webpack-4/bundle.js b/examples/default/dist/webpack-4/bundle.js
index 93e99b50..039e6f98 100644
--- a/examples/default/dist/webpack-4/bundle.js
+++ b/examples/default/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 ?
@@ -66,11 +81,106 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 4);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(1);
+var h1 = document.createElement('h1');
+h1.innerHTML = 'Hello world!';
+document.body.appendChild(h1);
+
+
+/***/ }),
+/* 1 */
+/***/ (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__(2);
+if(typeof content === 'string') content = [[module.i, content, '']];
+// add the styles to the DOM
+var update = __webpack_require__(4)(content, {});
+if(content.locals) module.exports = content.locals;
+// Hot Module Replacement
+if(false) {}
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(3)();
+// imports
+
+
+// module
+exports.push([module.i, "body {\n  background: snow;\n}", ""]);
+
+// exports
+
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+// css base code, injected by the css-loader
+module.exports = function() {
+	var list = [];
+
+	// return the list of modules as css string
+	list.toString = function toString() {
+		var result = [];
+		for(var i = 0; i < this.length; i++) {
+			var item = this[i];
+			if(item[2]) {
+				result.push("@media " + item[2] + "{" + item[1] + "}");
+			} else {
+				result.push(item[1]);
+			}
+		}
+		return result.join("");
+	};
+
+	// import a list of modules into the list
+	list.i = function(modules, mediaQuery) {
+		if(typeof modules === "string")
+			modules = [[null, modules, ""]];
+		var alreadyImportedModules = {};
+		for(var i = 0; i < this.length; i++) {
+			var id = this[i][0];
+			if(typeof id === "number")
+				alreadyImportedModules[id] = true;
+		}
+		for(i = 0; i < modules.length; i++) {
+			var item = modules[i];
+			// skip already imported module
+			// this implementation is not 100% perfect for weird media query combinations
+			//  when a module is imported multiple times with different media queries.
+			//  I hope this will never occur (Hey this way we have smaller bundles)
+			if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
+				if(mediaQuery && !item[2]) {
+					item[2] = mediaQuery;
+				} else if(mediaQuery) {
+					item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
+				}
+				list.push(item);
+			}
+		}
+	};
+	return list;
+};
+
+
+/***/ }),
+/* 4 */
 /***/ (function(module, exports) {
 
 /*
@@ -321,100 +431,5 @@ function updateLink(linkElement, obj) {
 }
 
 
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-/*
-	MIT License http://www.opensource.org/licenses/mit-license.php
-	Author Tobias Koppers @sokra
-*/
-// css base code, injected by the css-loader
-module.exports = function() {
-	var list = [];
-
-	// return the list of modules as css string
-	list.toString = function toString() {
-		var result = [];
-		for(var i = 0; i < this.length; i++) {
-			var item = this[i];
-			if(item[2]) {
-				result.push("@media " + item[2] + "{" + item[1] + "}");
-			} else {
-				result.push(item[1]);
-			}
-		}
-		return result.join("");
-	};
-
-	// import a list of modules into the list
-	list.i = function(modules, mediaQuery) {
-		if(typeof modules === "string")
-			modules = [[null, modules, ""]];
-		var alreadyImportedModules = {};
-		for(var i = 0; i < this.length; i++) {
-			var id = this[i][0];
-			if(typeof id === "number")
-				alreadyImportedModules[id] = true;
-		}
-		for(i = 0; i < modules.length; i++) {
-			var item = modules[i];
-			// skip already imported module
-			// this implementation is not 100% perfect for weird media query combinations
-			//  when a module is imported multiple times with different media queries.
-			//  I hope this will never occur (Hey this way we have smaller bundles)
-			if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
-				if(mediaQuery && !item[2]) {
-					item[2] = mediaQuery;
-				} else if(mediaQuery) {
-					item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
-				}
-				list.push(item);
-			}
-		}
-	};
-	return list;
-};
-
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
-
-exports = module.exports = __webpack_require__(1)();
-// imports
-
-
-// module
-exports.push([module.i, "body {\n  background: snow;\n}", ""]);
-
-// exports
-
-
-/***/ }),
-/* 3 */
-/***/ (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__(2);
-if(typeof content === 'string') content = [[module.i, content, '']];
-// add the styles to the DOM
-var update = __webpack_require__(0)(content, {});
-if(content.locals) module.exports = content.locals;
-// Hot Module Replacement
-if(false) {}
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__(3);
-var h1 = document.createElement('h1');
-h1.innerHTML = 'Hello world!';
-document.body.appendChild(h1);
-
-
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/default/webpack.config.js b/examples/default/webpack.config.js
index 6d5f9ae7..88fae2b5 100755
--- a/examples/default/webpack.config.js
+++ b/examples/default/webpack.config.js
@@ -1,6 +1,7 @@
 var path = require('path');
 var HtmlWebpackPlugin = require('../..');
 var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];
+
 module.exports = {
   context: __dirname,
   entry: './example.js',
diff --git a/examples/favicon/dist/webpack-4/bundle.js b/examples/favicon/dist/webpack-4/bundle.js
index 53bdab35..9fbb4892 100644
--- a/examples/favicon/dist/webpack-4/bundle.js
+++ b/examples/favicon/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
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/favicon/dist/webpack-4/favicon.html b/examples/favicon/dist/webpack-4/favicon.html
index 3f61fb6d..b1a12bd2 100644
--- a/examples/favicon/dist/webpack-4/favicon.html
+++ b/examples/favicon/dist/webpack-4/favicon.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>HtmlWebpackPlugin example</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><script src="bundle.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html><head><meta charset="utf-8"><title>HtmlWebpackPlugin example</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="style.css" rel="stylesheet"></head><body><script src="bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/examples/favicon/dist/webpack-4/styles.css b/examples/favicon/dist/webpack-4/style.css
similarity index 93%
rename from examples/favicon/dist/webpack-4/styles.css
rename to examples/favicon/dist/webpack-4/style.css
index 232a2cdb..e86486ba 100644
--- a/examples/favicon/dist/webpack-4/styles.css
+++ b/examples/favicon/dist/webpack-4/style.css
@@ -1,3 +1,3 @@
 body {
   background: snow;
-}
\ No newline at end of file
+}
diff --git a/examples/favicon/webpack.config.js b/examples/favicon/webpack.config.js
index ed68241a..8793e667 100755
--- a/examples/favicon/webpack.config.js
+++ b/examples/favicon/webpack.config.js
@@ -1,7 +1,8 @@
 var path = require('path');
 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 = {
   context: __dirname,
   entry: './example.js',
@@ -12,7 +13,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' }
     ]
   },
@@ -22,6 +23,6 @@ module.exports = {
       favicon: 'favicon.ico',
       filename: 'favicon.html'
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'style.css' })
   ]
 };
diff --git a/examples/html-loader/dist/webpack-4/about.html b/examples/html-loader/dist/webpack-4/about.html
index 166bf3ed..534e9cdf 100644
--- a/examples/html-loader/dist/webpack-4/about.html
+++ b/examples/html-loader/dist/webpack-4/about.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="style.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/examples/html-loader/dist/webpack-4/bundle.js b/examples/html-loader/dist/webpack-4/bundle.js
index 53bdab35..9fbb4892 100644
--- a/examples/html-loader/dist/webpack-4/bundle.js
+++ b/examples/html-loader/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
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/html-loader/dist/webpack-4/index.html b/examples/html-loader/dist/webpack-4/index.html
index 166bf3ed..534e9cdf 100644
--- a/examples/html-loader/dist/webpack-4/index.html
+++ b/examples/html-loader/dist/webpack-4/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="style.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/examples/html-loader/dist/webpack-4/styles.css b/examples/html-loader/dist/webpack-4/style.css
similarity index 93%
rename from examples/html-loader/dist/webpack-4/styles.css
rename to examples/html-loader/dist/webpack-4/style.css
index 232a2cdb..e86486ba 100644
--- a/examples/html-loader/dist/webpack-4/styles.css
+++ b/examples/html-loader/dist/webpack-4/style.css
@@ -1,3 +1,3 @@
 body {
   background: snow;
-}
\ No newline at end of file
+}
diff --git a/examples/html-loader/webpack.config.js b/examples/html-loader/webpack.config.js
index 2958c6c7..f6c27ac1 100755
--- a/examples/html-loader/webpack.config.js
+++ b/examples/html-loader/webpack.config.js
@@ -1,7 +1,8 @@
 var path = require('path');
 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 = {
   context: __dirname,
   entry: './example.js',
@@ -12,7 +13,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' }
     ]
@@ -28,6 +29,6 @@ module.exports = {
       favicon: 'favicon.ico',
       template: 'template.html'
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'style.css' })
   ]
 };
diff --git a/examples/inline/dist/webpack-4/bundle.js b/examples/inline/dist/webpack-4/bundle.js
index bd257a0d..9d4ffbaa 100644
--- a/examples/inline/dist/webpack-4/bundle.js
+++ b/examples/inline/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 ?
@@ -75,19 +90,16 @@
 
 "use strict";
 
-__webpack_require__(4);
+__webpack_require__(1);
 
 console.log('Hello World');
 
 
 /***/ }),
-/* 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
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/inline/dist/webpack-4/index.html b/examples/inline/dist/webpack-4/index.html
index 0ec0b1ff..87c25024 100644
--- a/examples/inline/dist/webpack-4/index.html
+++ b/examples/inline/dist/webpack-4/index.html
@@ -38,19 +38,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 ?
@@ -77,19 +92,16 @@
 
 "use strict";
 
-__webpack_require__(4);
+__webpack_require__(1);
 
 console.log('Hello World');
 
 
 /***/ }),
-/* 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
 
 /***/ })
 /******/ ]);</script></body></html>
\ No newline at end of file
diff --git a/examples/inline/dist/webpack-4/styles.css b/examples/inline/dist/webpack-4/style.css
similarity index 93%
rename from examples/inline/dist/webpack-4/styles.css
rename to examples/inline/dist/webpack-4/style.css
index 232a2cdb..e86486ba 100644
--- a/examples/inline/dist/webpack-4/styles.css
+++ b/examples/inline/dist/webpack-4/style.css
@@ -1,3 +1,3 @@
 body {
   background: snow;
-}
\ No newline at end of file
+}
diff --git a/examples/inline/webpack.config.js b/examples/inline/webpack.config.js
index aa2d0a01..bd52b0bd 100755
--- a/examples/inline/webpack.config.js
+++ b/examples/inline/webpack.config.js
@@ -1,6 +1,6 @@
 var path = require('path');
 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 = {
@@ -13,7 +13,7 @@ module.exports = {
   },
   module: {
     rules: [
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
+      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
       { test: /\.pug$/, loader: 'pug-loader' }
     ]
   },
@@ -26,6 +26,6 @@ module.exports = {
       favicon: 'favicon.ico',
       title: 'pug demo'
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'style.css' })
   ]
 };
diff --git a/examples/javascript-advanced/dist/webpack-4/bundle.js b/examples/javascript-advanced/dist/webpack-4/bundle.js
index d095771c..b5d4130a 100644
--- a/examples/javascript-advanced/dist/webpack-4/bundle.js
+++ b/examples/javascript-advanced/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 ?
@@ -66,30 +81,28 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
-eval("// This file is used for frontend and backend\n\n\n// If compiled by the html-webpack-plugin\n// HTML_WEBPACK_PLUGIN is set to true:\nvar backend = typeof HTML_WEBPACK_PLUGIN !== 'undefined';\n\nmodule.exports = function () {\n  return 'Hello World from ' + (backend ? 'backend' : 'frontend');\n};\n\n\n//# sourceURL=webpack:///./universial.js?");
+eval("__webpack_require__(1);\n\nvar universal = __webpack_require__(3);\nvar h1 = document.createElement('h1');\nh1.innerHTML = universal();\n\ndocument.body.appendChild(h1);\n\n\n//# sourceURL=webpack:///./example.js?");
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("__webpack_require__(5);\n\nvar universal = __webpack_require__(0);\nvar h1 = document.createElement('h1');\nh1.innerHTML = universal();\n\ndocument.body.appendChild(h1);\n\n\n//# sourceURL=webpack:///./example.js?");
+eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./main.css?");
 
 /***/ }),
 /* 2 */,
-/* 3 */,
-/* 4 */,
-/* 5 */
-/***/ (function(module, exports) {
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
 
-eval("// removed by extract-text-webpack-plugin\n\n//# sourceURL=webpack:///./main.css?");
+"use strict";
+eval("// This file is used for frontend and backend\n\n\n// If compiled by the html-webpack-plugin\n// HTML_WEBPACK_PLUGIN is set to true:\nvar backend = typeof HTML_WEBPACK_PLUGIN !== 'undefined';\n\nmodule.exports = function () {\n  return 'Hello World from ' + (backend ? 'backend' : 'frontend');\n};\n\n\n//# sourceURL=webpack:///./universial.js?");
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/javascript-advanced/dist/webpack-4/index.html b/examples/javascript-advanced/dist/webpack-4/index.html
index 2ec60f39..58f4056c 100644
--- a/examples/javascript-advanced/dist/webpack-4/index.html
+++ b/examples/javascript-advanced/dist/webpack-4/index.html
@@ -1 +1 @@
-<html><head><title>Webpack App</title><link href="styles.css" rel="stylesheet"></head><body>Hello World from backend -<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
\ No newline at end of file
+<html><head><title>Webpack App</title><link href="style.css" rel="stylesheet"></head><body>Hello World from backend -<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/examples/javascript-advanced/dist/webpack-4/style.css b/examples/javascript-advanced/dist/webpack-4/style.css
new file mode 100644
index 00000000..e86486ba
--- /dev/null
+++ b/examples/javascript-advanced/dist/webpack-4/style.css
@@ -0,0 +1,3 @@
+body {
+  background: snow;
+}
diff --git a/examples/javascript-advanced/dist/webpack-4/styles.css b/examples/javascript-advanced/dist/webpack-4/styles.css
deleted file mode 100644
index 232a2cdb..00000000
--- a/examples/javascript-advanced/dist/webpack-4/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background: snow;
-}
\ No newline at end of file
diff --git a/examples/javascript-advanced/webpack.config.js b/examples/javascript-advanced/webpack.config.js
index be24ecc2..a7f94e41 100644
--- a/examples/javascript-advanced/webpack.config.js
+++ b/examples/javascript-advanced/webpack.config.js
@@ -1,7 +1,8 @@
 var path = require('path');
 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 = {
   context: __dirname,
   entry: './example.js',
@@ -12,7 +13,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' }
     ]
@@ -22,6 +23,6 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'template.js'
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'style.css' })
   ]
 };
diff --git a/examples/javascript/dist/webpack-4/bundle.js b/examples/javascript/dist/webpack-4/bundle.js
index d095771c..b5d4130a 100644
--- a/examples/javascript/dist/webpack-4/bundle.js
+++ b/examples/javascript/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 ?
@@ -66,30 +81,28 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
-eval("// This file is used for frontend and backend\n\n\n// If compiled by the html-webpack-plugin\n// HTML_WEBPACK_PLUGIN is set to true:\nvar backend = typeof HTML_WEBPACK_PLUGIN !== 'undefined';\n\nmodule.exports = function () {\n  return 'Hello World from ' + (backend ? 'backend' : 'frontend');\n};\n\n\n//# sourceURL=webpack:///./universial.js?");
+eval("__webpack_require__(1);\n\nvar universal = __webpack_require__(3);\nvar h1 = document.createElement('h1');\nh1.innerHTML = universal();\n\ndocument.body.appendChild(h1);\n\n\n//# sourceURL=webpack:///./example.js?");
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("__webpack_require__(5);\n\nvar universal = __webpack_require__(0);\nvar h1 = document.createElement('h1');\nh1.innerHTML = universal();\n\ndocument.body.appendChild(h1);\n\n\n//# sourceURL=webpack:///./example.js?");
+eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./main.css?");
 
 /***/ }),
 /* 2 */,
-/* 3 */,
-/* 4 */,
-/* 5 */
-/***/ (function(module, exports) {
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
 
-eval("// removed by extract-text-webpack-plugin\n\n//# sourceURL=webpack:///./main.css?");
+"use strict";
+eval("// This file is used for frontend and backend\n\n\n// If compiled by the html-webpack-plugin\n// HTML_WEBPACK_PLUGIN is set to true:\nvar backend = typeof HTML_WEBPACK_PLUGIN !== 'undefined';\n\nmodule.exports = function () {\n  return 'Hello World from ' + (backend ? 'backend' : 'frontend');\n};\n\n\n//# sourceURL=webpack:///./universial.js?");
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/javascript/dist/webpack-4/index.html b/examples/javascript/dist/webpack-4/index.html
index daac7ae4..febe1911 100644
--- a/examples/javascript/dist/webpack-4/index.html
+++ b/examples/javascript/dist/webpack-4/index.html
@@ -1 +1 @@
-<head><link href="styles.css" rel="stylesheet"></head>Hello World from backend2018-09-15T20:52:24.239Z<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script>
\ No newline at end of file
+<head><link href="style.css" rel="stylesheet"></head>Hello World from backend2018-10-01T11:23:36.744Z<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script>
\ No newline at end of file
diff --git a/examples/javascript/dist/webpack-4/style.css b/examples/javascript/dist/webpack-4/style.css
new file mode 100644
index 00000000..e86486ba
--- /dev/null
+++ b/examples/javascript/dist/webpack-4/style.css
@@ -0,0 +1,3 @@
+body {
+  background: snow;
+}
diff --git a/examples/javascript/dist/webpack-4/styles.css b/examples/javascript/dist/webpack-4/styles.css
deleted file mode 100644
index 232a2cdb..00000000
--- a/examples/javascript/dist/webpack-4/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background: snow;
-}
\ No newline at end of file
diff --git a/examples/javascript/webpack.config.js b/examples/javascript/webpack.config.js
index be24ecc2..9b1aad44 100644
--- a/examples/javascript/webpack.config.js
+++ b/examples/javascript/webpack.config.js
@@ -1,6 +1,6 @@
 var path = require('path');
 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 = {
   context: __dirname,
@@ -12,7 +12,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' }
     ]
@@ -22,6 +22,6 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'template.js'
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'style.css' })
   ]
 };
diff --git a/examples/pug-loader/dist/webpack-4/bundle.js b/examples/pug-loader/dist/webpack-4/bundle.js
index 95ed4747..61003ca4 100644
--- a/examples/pug-loader/dist/webpack-4/bundle.js
+++ b/examples/pug-loader/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 ?
@@ -66,19 +81,46 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 3);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+__webpack_require__(1);
+// Use the same template for the frontend code
+var template = __webpack_require__(3);
+
+setInterval(function () {
+  var div = document.getElementById('main');
+  div.innerHTML = template({ time: new Date() });
+  div.style.color = 'navy';
+}, 1000);
 
-/* (ignored) */
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports, __webpack_require__) {
 
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+/* 2 */,
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var pug = __webpack_require__(4);
+
+function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;;var locals_for_with = (locals || {});(function (time) {pug_html = pug_html + "\u003C!-- this partial is used for frontend and backend--\u003E\u003Cdiv class=\"time\"\u003E \u003Cb\u003ECurrent time\u003C\u002Fb\u003E\u003Cp\u003E" + (pug.escape(null == (pug_interp = time.toISOString()) ? "" : pug_interp)) + "\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cimg src=\"#{require('.\u002Flogo.png')}\"\u003E";}.call(this,"time" in locals_for_with?locals_for_with.time:typeof time!=="undefined"?time:undefined));;return pug_html;};
+module.exports = template;
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
 "use strict";
 
 
@@ -309,7 +351,7 @@ function pug_rethrow(err, filename, lineno, str){
     throw err;
   }
   try {
-    str = str || __webpack_require__(0).readFileSync(filename, 'utf8')
+    str = str || __webpack_require__(5).readFileSync(filename, 'utf8')
   } catch (ex) {
     pug_rethrow(err, null, lineno)
   }
@@ -336,39 +378,10 @@ function pug_rethrow(err, filename, lineno, str){
 
 
 /***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var pug = __webpack_require__(1);
-
-function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;;var locals_for_with = (locals || {});(function (time) {pug_html = pug_html + "\u003C!-- this partial is used for frontend and backend--\u003E\u003Cdiv class=\"time\"\u003E \u003Cb\u003ECurrent time\u003C\u002Fb\u003E\u003Cp\u003E" + (pug.escape(null == (pug_interp = time.toISOString()) ? "" : pug_interp)) + "\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cimg src=\"#{require('.\u002Flogo.png')}\"\u003E";}.call(this,"time" in locals_for_with?locals_for_with.time:typeof time!=="undefined"?time:undefined));;return pug_html;};
-module.exports = template;
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-__webpack_require__(7);
-// Use the same template for the frontend code
-var template = __webpack_require__(2);
-
-setInterval(function () {
-  var div = document.getElementById('main');
-  div.innerHTML = template({ time: new Date() });
-  div.style.color = 'navy';
-}, 1000);
-
-
-/***/ }),
-/* 4 */,
-/* 5 */,
-/* 6 */,
-/* 7 */
+/* 5 */
 /***/ (function(module, exports) {
 
-// removed by extract-text-webpack-plugin
+/* (ignored) */
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/examples/pug-loader/dist/webpack-4/index.html b/examples/pug-loader/dist/webpack-4/index.html
index 8568a711..afd3f950 100644
--- a/examples/pug-loader/dist/webpack-4/index.html
+++ b/examples/pug-loader/dist/webpack-4/index.html
@@ -1 +1 @@
-<!doctype html><html><head><title>pug demo</title><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><div id="main"><div class="time"><b>Current time</b><p>1999-01-01T00:00:00.000Z</p></div><img src="#{require('./logo.png')}"></div><script src="bundle.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html><head><title>pug demo</title><link rel="shortcut icon" href="favicon.ico"><link href="style.css" rel="stylesheet"></head><body><div id="main"><div class="time"><b>Current time</b><p>1998-12-31T18:30:00.000Z</p></div><img src="#{require('./logo.png')}"></div><script src="bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/examples/pug-loader/dist/webpack-4/style.css b/examples/pug-loader/dist/webpack-4/style.css
new file mode 100644
index 00000000..e86486ba
--- /dev/null
+++ b/examples/pug-loader/dist/webpack-4/style.css
@@ -0,0 +1,3 @@
+body {
+  background: snow;
+}
diff --git a/examples/pug-loader/dist/webpack-4/styles.css b/examples/pug-loader/dist/webpack-4/styles.css
deleted file mode 100644
index 232a2cdb..00000000
--- a/examples/pug-loader/dist/webpack-4/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background: snow;
-}
\ No newline at end of file
diff --git a/examples/pug-loader/webpack.config.js b/examples/pug-loader/webpack.config.js
index b2f6a6ac..2d6ba250 100755
--- a/examples/pug-loader/webpack.config.js
+++ b/examples/pug-loader/webpack.config.js
@@ -1,7 +1,8 @@
 var path = require('path');
 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 = {
   context: __dirname,
   entry: './example.js',
@@ -12,7 +13,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: /\.pug$/, loader: 'pug-loader' }
     ]
@@ -24,6 +25,6 @@ module.exports = {
       template: 'template.pug',
       title: 'pug demo'
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'style.css' })
   ]
 };
diff --git a/examples/sort-manually/dist/webpack-4/a.js b/examples/sort-manually/dist/webpack-4/a.js
index e6b4de3b..45d5bc6c 100644
--- a/examples/sort-manually/dist/webpack-4/a.js
+++ b/examples/sort-manually/dist/webpack-4/a.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 ?
@@ -69,24 +84,23 @@
 /******/ 	return __webpack_require__(__webpack_require__.s = 2);
 /******/ })
 /************************************************************************/
-/******/ ({
-
-/***/ 2:
+/******/ ([
+/* 0 */,
+/* 1 */,
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(8);
+__webpack_require__(3);
 var h1 = document.createElement('h1');
 h1.innerHTML = 'a!';
 document.body.appendChild(h1);
 
 
 /***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
 
-/***/ 8:
-/***/ (function(module, exports) {
-
-// removed by extract-text-webpack-plugin
+// extracted by mini-css-extract-plugin
 
 /***/ })
-
-/******/ });
\ No newline at end of file
+/******/ ]);
\ No newline at end of file
diff --git a/examples/sort-manually/dist/webpack-4/b.js b/examples/sort-manually/dist/webpack-4/b.js
index 7dbca5d4..ff84b5e4 100644
--- a/examples/sort-manually/dist/webpack-4/b.js
+++ b/examples/sort-manually/dist/webpack-4/b.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 ?
@@ -66,12 +81,11 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 4);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
 /************************************************************************/
-/******/ ({
-
-/***/ 4:
+/******/ ([
+/* 0 */
 /***/ (function(module, exports) {
 
 var h1 = document.createElement('h1');
@@ -80,5 +94,4 @@ document.body.appendChild(h1);
 
 
 /***/ })
-
-/******/ });
\ No newline at end of file
+/******/ ]);
\ No newline at end of file
diff --git a/examples/sort-manually/dist/webpack-4/c.js b/examples/sort-manually/dist/webpack-4/c.js
index 0398b415..77006cd8 100644
--- a/examples/sort-manually/dist/webpack-4/c.js
+++ b/examples/sort-manually/dist/webpack-4/c.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 ?
@@ -66,12 +81,12 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
 /******/ })
 /************************************************************************/
-/******/ ([
-/* 0 */,
-/* 1 */
+/******/ ({
+
+/***/ 5:
 /***/ (function(module, exports) {
 
 var h1 = document.createElement('h1');
@@ -80,4 +95,5 @@ document.body.appendChild(h1);
 
 
 /***/ })
-/******/ ]);
\ No newline at end of file
+
+/******/ });
\ No newline at end of file
diff --git a/examples/sort-manually/dist/webpack-4/d.js b/examples/sort-manually/dist/webpack-4/d.js
index 57ea10fb..fcb4c43c 100644
--- a/examples/sort-manually/dist/webpack-4/d.js
+++ b/examples/sort-manually/dist/webpack-4/d.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 ?
@@ -66,12 +81,12 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 3);
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
 /******/ })
 /************************************************************************/
-/******/ ({
-
-/***/ 3:
+/******/ ([
+/* 0 */,
+/* 1 */
 /***/ (function(module, exports) {
 
 var h1 = document.createElement('h1');
@@ -80,5 +95,4 @@ document.body.appendChild(h1);
 
 
 /***/ })
-
-/******/ });
\ No newline at end of file
+/******/ ]);
\ No newline at end of file
diff --git a/examples/sort-manually/dist/webpack-4/e.js b/examples/sort-manually/dist/webpack-4/e.js
index 4b3a5a83..1c7670ec 100644
--- a/examples/sort-manually/dist/webpack-4/e.js
+++ b/examples/sort-manually/dist/webpack-4/e.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 ?
@@ -66,11 +81,12 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 6);
 /******/ })
 /************************************************************************/
-/******/ ([
-/* 0 */
+/******/ ({
+
+/***/ 6:
 /***/ (function(module, exports) {
 
 var h1 = document.createElement('h1');
@@ -79,4 +95,5 @@ document.body.appendChild(h1);
 
 
 /***/ })
-/******/ ]);
\ No newline at end of file
+
+/******/ });
\ No newline at end of file
diff --git a/examples/sort-manually/dist/webpack-4/first-file.html b/examples/sort-manually/dist/webpack-4/first-file.html
index f251a0f8..75cee6fb 100644
--- a/examples/sort-manually/dist/webpack-4/first-file.html
+++ b/examples/sort-manually/dist/webpack-4/first-file.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="a.js"></script><script src="b.js"></script><script src="c.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="style.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="a.js"></script><script src="b.js"></script><script src="c.js"></script></body></html>
\ No newline at end of file
diff --git a/examples/sort-manually/dist/webpack-4/second-file.html b/examples/sort-manually/dist/webpack-4/second-file.html
index ba8f8673..ab1cc86a 100644
--- a/examples/sort-manually/dist/webpack-4/second-file.html
+++ b/examples/sort-manually/dist/webpack-4/second-file.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="a.js"></script><script src="b.js"></script><script src="d.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="style.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="a.js"></script><script src="b.js"></script><script src="d.js"></script></body></html>
\ No newline at end of file
diff --git a/examples/sort-manually/dist/webpack-4/style.css b/examples/sort-manually/dist/webpack-4/style.css
new file mode 100644
index 00000000..e86486ba
--- /dev/null
+++ b/examples/sort-manually/dist/webpack-4/style.css
@@ -0,0 +1,3 @@
+body {
+  background: snow;
+}
diff --git a/examples/sort-manually/dist/webpack-4/styles.css b/examples/sort-manually/dist/webpack-4/styles.css
deleted file mode 100644
index 232a2cdb..00000000
--- a/examples/sort-manually/dist/webpack-4/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background: snow;
-}
\ No newline at end of file
diff --git a/examples/sort-manually/webpack.config.js b/examples/sort-manually/webpack.config.js
index 6b01825d..b50dc6e1 100644
--- a/examples/sort-manually/webpack.config.js
+++ b/examples/sort-manually/webpack.config.js
@@ -1,6 +1,6 @@
 var path = require('path');
 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 = {
   context: __dirname,
@@ -18,7 +18,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' }
     ]
@@ -38,6 +38,6 @@ module.exports = {
       chunksSortMode: 'manual',
       chunks: ['a', 'b', 'd']
     }),
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'style.css' })
   ]
 };
diff --git a/examples/template-parameters/dist/webpack-4/bundle.js b/examples/template-parameters/dist/webpack-4/bundle.js
index 706b67e4..04b5d781 100644
--- a/examples/template-parameters/dist/webpack-4/bundle.js
+++ b/examples/template-parameters/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 ?
diff --git a/package.json b/package.json
index 3debaffd..9c38f9f2 100644
--- a/package.json
+++ b/package.json
@@ -33,10 +33,10 @@
     "css-loader": "^0.26.1",
     "cz-conventional-changelog": "2.1.0",
     "dir-compare": "1.3.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^0.9.0",
     "html-loader": "^0.4.4",
     "jest": "23.3.0",
+    "mini-css-extract-plugin": "^0.4.3",
     "pug": "2.0.3",
     "pug-loader": "2.4.0",
     "rimraf": "^2.5.4",
@@ -46,7 +46,7 @@
     "typescript": "2.9.1",
     "underscore-template-loader": "^0.7.3",
     "url-loader": "^0.5.7",
-    "webpack": "4.1.0",
+    "webpack": "^4.20.2",
     "webpack-cli": "2.0.12",
     "webpack-recompilation-simulator": "^3.0.0"
   },
diff --git a/spec/basic.spec.js b/spec/basic.spec.js
index 1c74f1ef..4dc1a8f9 100644
--- a/spec/basic.spec.js
+++ b/spec/basic.spec.js
@@ -10,8 +10,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 const rimraf = require('rimraf');
 const _ = require('lodash');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const extractTextPluginMajorVersion = require('extract-text-webpack-plugin/package.json').version.split('.')[0];
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpackMajorVersion = Number(require('webpack/package.json').version.split('.')[0]);
 if (isNaN(webpackMajorVersion)) {
   throw new Error('Cannot parse webpack major version');
@@ -19,14 +18,6 @@ if (isNaN(webpackMajorVersion)) {
 
 const HtmlWebpackPlugin = require('../index.js');
 
-if (Number(extractTextPluginMajorVersion) > 1) {
-  const extractOriginal = ExtractTextPlugin.extract;
-  ExtractTextPlugin.extract = (fallback, use) => extractOriginal({
-    fallback: fallback,
-    use: use
-  });
-}
-
 const OUTPUT_DIR = path.resolve(__dirname, '../dist/basic-spec');
 
 jest.setTimeout(30000);
@@ -443,12 +434,12 @@ describe('HtmlWebpackPlugin', () => {
       },
       module: {
         rules: [
-          { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
         ]
       },
       plugins: [
         new HtmlWebpackPlugin(),
-        new ExtractTextPlugin('styles.css')
+        new MiniCssExtractPlugin({filename: 'styles.css'})
       ]
     }, ['<link href="styles.css" rel="stylesheet">'], null, done);
   });
@@ -464,12 +455,12 @@ describe('HtmlWebpackPlugin', () => {
       },
       module: {
         rules: [
-          { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
         ]
       },
       plugins: [
         new HtmlWebpackPlugin(),
-        new ExtractTextPlugin('styles.css')
+        new MiniCssExtractPlugin({filename: 'styles.css'})
       ]
     }, ['<link href="//localhost:8080/styles.css"'], null, done);
   });
@@ -484,12 +475,12 @@ describe('HtmlWebpackPlugin', () => {
       },
       module: {
         rules: [
-          { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
         ]
       },
       plugins: [
         new HtmlWebpackPlugin({hash: true}),
-        new ExtractTextPlugin('styles.css')
+        new MiniCssExtractPlugin({filename: 'styles.css'})
       ]
     }, ['<link href="styles.css?%hash%"'], null, done);
   });
@@ -504,12 +495,12 @@ describe('HtmlWebpackPlugin', () => {
       },
       module: {
         rules: [
-          { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
         ]
       },
       plugins: [
         new HtmlWebpackPlugin({inject: true}),
-        new ExtractTextPlugin('styles.css')
+        new MiniCssExtractPlugin({filename: 'styles.css'})
       ]
     }, ['<link href="styles.css"'], null, done);
   });
@@ -524,12 +515,12 @@ describe('HtmlWebpackPlugin', () => {
       },
       module: {
         rules: [
-          { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
         ]
       },
       plugins: [
         new HtmlWebpackPlugin({hash: true, inject: true}),
-        new ExtractTextPlugin('styles.css')
+        new MiniCssExtractPlugin({filename: 'styles.css'})
       ]
     }, ['<link href="styles.css?%hash%"'], null, done);
   });
@@ -544,7 +535,7 @@ describe('HtmlWebpackPlugin', () => {
       },
       module: {
         rules: [
-          { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
         ]
       },
       plugins: [
@@ -554,7 +545,7 @@ describe('HtmlWebpackPlugin', () => {
             keepClosingSlash: true
           }
         }),
-        new ExtractTextPlugin('styles.css')
+        new MiniCssExtractPlugin({filename: 'styles.css'})
       ]
     }, ['<link href="styles.css" rel="stylesheet"/>'], null, done);
   });
@@ -755,12 +746,12 @@ describe('HtmlWebpackPlugin', () => {
       },
       module: {
         rules: [
-          { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
         ]
       },
       plugins: [
         new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/empty_html.html')}),
-        new ExtractTextPlugin('styles.css')
+        new MiniCssExtractPlugin({filename: 'styles.css'})
       ]
     }, ['<link href="styles.css"', '<script src="index_bundle.js"'], null, done);
   });