diff --git a/.vuepress/config.js b/.vuepress/config.js
index 1ce0c9c..17dde62 100644
--- a/.vuepress/config.js
+++ b/.vuepress/config.js
@@ -17,6 +17,7 @@ module.exports = {
           '/docs/styles.md',
           '/docs/icons.md',
           '/docs/utils.md',
+          '/docs/wordpress.md',
           '/docs/extending.md',
         ]
       }
diff --git a/docs/utils.md b/docs/utils.md
index bbe0e3e..9133c53 100644
--- a/docs/utils.md
+++ b/docs/utils.md
@@ -8,7 +8,11 @@ To configure them, you can pass these options in your `webpack.config.js`:
 ```typescript
 features: {
   styles: {
-    browserSync?: boolean;
+    browserSync?: {
+      proxy: string;
+      host?: string;
+      port?: number;
+    };
     jquery?: 'internal' | 'external';
   }
 }
@@ -26,8 +30,9 @@ BrowserSync seems to get around it by overriding paths in every HTML generated
 by proxied site.
 
 In this package, we use `browser-sync-webpack-plugin` to create BrowserSync
-instance which proxies our `webpack-dev-server`, which in turn proxies our
-WordPress site. Pretty complicated, but works! :tada:
+instance which proxies our WordPress site. Pretty complicated, but works! :tada:
+
+You can read more [here](wordpress.md).
 
 ## Difference between internal or external jQuery
 
@@ -40,7 +45,7 @@ done by `external` option here.
 
 ::: warning
 
-When using this option, please make sure that jQuery is loaded before webpack in
-HTML.
+When using this option, please make sure that jQuery is loaded before
+webpack-generated assets in HTML.
 
 :::
diff --git a/docs/wordpress.md b/docs/wordpress.md
new file mode 100644
index 0000000..a2e8578
--- /dev/null
+++ b/docs/wordpress.md
@@ -0,0 +1,17 @@
+# Using with WordPress
+
+By default serving JS and CSS from `webpack-dev-server` does not work with
+WordPress due to absolute URL paths hardcoded in HTML. However,
+[BrowserSync](https://www.browsersync.io/) fixes this problem by replacing paths
+in HTML to proxied server. Because of that in WordPress we are using Webpack in
+watch mode (`webpack --watch`) with
+[`browser-sync-webpack-plugin`](https://github.com/Va1/browser-sync-webpack-plugin)
+enabled.
+
+There are few minor differences between this method and proxying with
+`webpack-dev-server`:
+
+* `webpack`-compiled assets are written to disk instead of memory,
+* BrowserSync doesn't reuse webpack-dev-server configuration, [so you have to
+  configure it in utils section](utils.md),
+* JS hot-reloading doesn't work (but CSS works).
diff --git a/package.json b/package.json
index 77e46c2..338c275 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "webpack": "^4.31.0",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.1.14",
+    "webpack-fix-style-only-entries": "^0.2.1",
     "webpack-merge": "^4.2.1"
   },
   "devDependencies": {
diff --git a/src/@types/browser-sync-webpack-plugin.ts b/src/@types/browser-sync-webpack-plugin.ts
index 748c9b8..fc9e530 100644
--- a/src/@types/browser-sync-webpack-plugin.ts
+++ b/src/@types/browser-sync-webpack-plugin.ts
@@ -11,9 +11,9 @@ declare module 'browser-sync-webpack-plugin' {
     }
     namespace BrowserSyncPlugin {
         interface IBrowserSyncOptions {
-          host: string;
-          port: number;
           proxy: string;
+          host?: string;
+          port?: number;
         }
 
         interface IBrowserSyncPluginOptions {
diff --git a/src/@types/webpack-fix-style-only-entries.ts b/src/@types/webpack-fix-style-only-entries.ts
new file mode 100644
index 0000000..3da953e
--- /dev/null
+++ b/src/@types/webpack-fix-style-only-entries.ts
@@ -0,0 +1,19 @@
+/// <reference types="node" />
+
+declare module 'webpack-fix-style-only-entries' {
+  import * as webpack from 'webpack';
+
+  class WebpackFixStyleOnlyEntries extends webpack.Plugin {
+    constructor(options?: WebpackFixStyleOnlyEntries.IOptions);
+    public apply(compiler: webpack.Compiler): void;
+  }
+
+  namespace WebpackFixStyleOnlyEntries {
+    interface IOptions {
+      extensions?: string[];
+      silent?: boolean;
+    }
+  }
+
+  export = WebpackFixStyleOnlyEntries;
+}
diff --git a/src/configs/styles.ts b/src/configs/styles.ts
index 2502a56..3caaee8 100644
--- a/src/configs/styles.ts
+++ b/src/configs/styles.ts
@@ -1,5 +1,6 @@
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import * as magicImporter from 'node-sass-magic-importer';
+import * as FixStyleOnlyEntriesPlugin from 'webpack-fix-style-only-entries';
 
 import { IConfiguration, WebpackMode } from '../defaultOptions';
 
@@ -19,26 +20,26 @@ export function styles({ styles: stylesConfig }: IConfiguration, mode: WebpackMo
 
   const fileRegex = stylesConfig.scss ? /\.(sa|sc|c)ss$/ : /\.css$/;
   const loaders = [
-    stylesConfig.extractToFile && mode === 'production'
-        ? MiniCssExtractPlugin.loader
-        : 'style-loader',
+    stylesConfig.extractToFile
+      ? MiniCssExtractPlugin.loader
+      : 'style-loader',
 
     'css-loader',
     'resolve-url-loader',
   ];
   const plugins = [];
 
+  plugins.push(new FixStyleOnlyEntriesPlugin());
+
   if (stylesConfig.scss) {
     loaders.push(sassLoader);
   }
 
   if (stylesConfig.extractToFile) {
-    plugins.push(
-            new MiniCssExtractPlugin({
-              filename: '[name].css',
-              chunkFilename: '[id].css',
-            }),
-        );
+    plugins.push(new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }));
   }
 
   return {
diff --git a/src/configs/utils.ts b/src/configs/utils.ts
index dd17604..bf5de78 100644
--- a/src/configs/utils.ts
+++ b/src/configs/utils.ts
@@ -3,14 +3,14 @@ import { Configuration as WebpackConfiguration, ProvidePlugin } from 'webpack';
 import { IConfiguration } from '../defaultOptions';
 
 export interface IUtilOptions {
-  browserSync?: boolean;
+  browserSync?: BrowserSyncPlugin.IBrowserSyncOptions;
   jquery?: 'internal' | 'external';
 }
 
 function validateConfig(config: IUtilOptions) {
   if (config.browserSync !== undefined) {
-    if (typeof config.browserSync !== 'boolean') {
-      throw new Error('Invalid option for browserSync, boolean should be passed.');
+    if (typeof config.browserSync !== 'object') {
+      throw new Error('Invalid option for browserSync, object should be passed.');
     }
   }
 
@@ -29,18 +29,9 @@ export function utils({ utils: utilsConfig }: IConfiguration) {
   if (utilsConfig.browserSync) {
     config.plugins = config.plugins || [];
 
-    config.plugins.push(
-            new BrowserSyncPlugin(
-              {
-                host: 'localhost',
-                port: 3000,
-                proxy: 'http://localhost:3100/',
-              },
-              {
-                reload: false,
-              },
-            ),
-        );
+    config.plugins.push(new BrowserSyncPlugin(utilsConfig.browserSync, {
+      reload: false,
+    }));
   }
 
   if (utilsConfig.jquery === 'external') {
diff --git a/src/configs/webpack.base.ts b/src/configs/webpack.base.ts
index 2d13713..6511860 100644
--- a/src/configs/webpack.base.ts
+++ b/src/configs/webpack.base.ts
@@ -7,7 +7,11 @@ const baseConfig = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: [['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }]],
+            presets: [['@babel/preset-env', {
+              modules: false,
+              useBuiltIns: 'usage',
+              corejs: 2,
+            }]],
           },
         },
       },
diff --git a/src/defaultOptions.ts b/src/defaultOptions.ts
index 7969451..aac8e4c 100644
--- a/src/defaultOptions.ts
+++ b/src/defaultOptions.ts
@@ -22,7 +22,5 @@ export const defaultOptions: IConfiguration = {
     extractToFile: true,
     scss: true,
   },
-  utils: {
-    browserSync: false,
-  },
+  utils: {},
 };
diff --git a/test/scss-glob/__snapshots__/test.spec.ts.snap b/test/scss-glob/__snapshots__/test.spec.ts.snap
index 22d4e82..f4b4b56 100644
--- a/test/scss-glob/__snapshots__/test.spec.ts.snap
+++ b/test/scss-glob/__snapshots__/test.spec.ts.snap
@@ -89,51 +89,6 @@ exports[`should import global scss files 1`] = `
 /************************************************************************/
 /******/ ({
 
-/***/ \\"./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./test/scss-glob/src/test.scss\\":
-/*!*****************************************************************************************************************************************************************!*\\\\
-  !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--6-3!./test/scss-glob/src/test.scss ***!
-  \\\\*****************************************************************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-eval(\\"exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \\\\\\"./node_modules/css-loader/dist/runtime/api.js\\\\\\")(false);\\\\n// Module\\\\nexports.push([module.i, \\\\\\".first {\\\\\\\\n  font-weight: bold; }\\\\\\\\n\\\\\\\\n.second {\\\\\\\\n  color: #f0f; }\\\\\\\\n\\\\\\", \\\\\\"\\\\\\"]);\\\\n\\\\n\\\\n\\\\n//# sourceURL=webpack:///./test/scss-glob/src/test.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--6-3\\");
-
-/***/ }),
-
-/***/ \\"./node_modules/css-loader/dist/runtime/api.js\\":
-/*!*****************************************************!*\\\\
-  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
-  \\\\*****************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-\\"use strict\\";
-eval(\\"\\\\n\\\\n/*\\\\n  MIT License http://www.opensource.org/licenses/mit-license.php\\\\n  Author Tobias Koppers @sokra\\\\n*/\\\\n// css base code, injected by the css-loader\\\\nmodule.exports = function (useSourceMap) {\\\\n  var list = []; // return the list of modules as css string\\\\n\\\\n  list.toString = function toString() {\\\\n    return this.map(function (item) {\\\\n      var content = cssWithMappingToString(item, useSourceMap);\\\\n\\\\n      if (item[2]) {\\\\n        return '@media ' + item[2] + '{' + content + '}';\\\\n      } else {\\\\n        return content;\\\\n      }\\\\n    }).join('');\\\\n  }; // import a list of modules into the list\\\\n\\\\n\\\\n  list.i = function (modules, mediaQuery) {\\\\n    if (typeof modules === 'string') {\\\\n      modules = [[null, modules, '']];\\\\n    }\\\\n\\\\n    var alreadyImportedModules = {};\\\\n\\\\n    for (var i = 0; i < this.length; i++) {\\\\n      var id = this[i][0];\\\\n\\\\n      if (id != null) {\\\\n        alreadyImportedModules[id] = true;\\\\n      }\\\\n    }\\\\n\\\\n    for (i = 0; i < modules.length; i++) {\\\\n      var item = modules[i]; // skip already imported module\\\\n      // this implementation is not 100% perfect for weird media query combinations\\\\n      // when a module is imported multiple times with different media queries.\\\\n      // I hope this will never occur (Hey this way we have smaller bundles)\\\\n\\\\n      if (item[0] == null || !alreadyImportedModules[item[0]]) {\\\\n        if (mediaQuery && !item[2]) {\\\\n          item[2] = mediaQuery;\\\\n        } else if (mediaQuery) {\\\\n          item[2] = '(' + item[2] + ') and (' + mediaQuery + ')';\\\\n        }\\\\n\\\\n        list.push(item);\\\\n      }\\\\n    }\\\\n  };\\\\n\\\\n  return list;\\\\n};\\\\n\\\\nfunction cssWithMappingToString(item, useSourceMap) {\\\\n  var content = item[1] || '';\\\\n  var cssMapping = item[3];\\\\n\\\\n  if (!cssMapping) {\\\\n    return content;\\\\n  }\\\\n\\\\n  if (useSourceMap && typeof btoa === 'function') {\\\\n    var sourceMapping = toComment(cssMapping);\\\\n    var sourceURLs = cssMapping.sources.map(function (source) {\\\\n      return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';\\\\n    });\\\\n    return [content].concat(sourceURLs).concat([sourceMapping]).join('\\\\\\\\n');\\\\n  }\\\\n\\\\n  return [content].join('\\\\\\\\n');\\\\n} // Adapted from convert-source-map (MIT)\\\\n\\\\n\\\\nfunction toComment(sourceMap) {\\\\n  // eslint-disable-next-line no-undef\\\\n  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\\\\n  var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\\\\n  return '/*# ' + data + ' */';\\\\n}\\\\n\\\\n//# sourceURL=webpack:///./node_modules/css-loader/dist/runtime/api.js?\\");
-
-/***/ }),
-
-/***/ \\"./node_modules/style-loader/lib/addStyles.js\\":
-/*!****************************************************!*\\\\
-  !*** ./node_modules/style-loader/lib/addStyles.js ***!
-  \\\\****************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-eval(\\"/*\\\\n\\\\tMIT License http://www.opensource.org/licenses/mit-license.php\\\\n\\\\tAuthor Tobias Koppers @sokra\\\\n*/\\\\n\\\\nvar stylesInDom = {};\\\\n\\\\nvar\\\\tmemoize = function (fn) {\\\\n\\\\tvar memo;\\\\n\\\\n\\\\treturn function () {\\\\n\\\\t\\\\tif (typeof memo === \\\\\\"undefined\\\\\\") memo = fn.apply(this, arguments);\\\\n\\\\t\\\\treturn memo;\\\\n\\\\t};\\\\n};\\\\n\\\\nvar isOldIE = memoize(function () {\\\\n\\\\t// Test for IE <= 9 as proposed by Browserhacks\\\\n\\\\t// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\\\\n\\\\t// Tests for existence of standard globals is to allow style-loader\\\\n\\\\t// to operate correctly into non-standard environments\\\\n\\\\t// @see https://github.com/webpack-contrib/style-loader/issues/177\\\\n\\\\treturn window && document && document.all && !window.atob;\\\\n});\\\\n\\\\nvar getTarget = function (target, parent) {\\\\n  if (parent){\\\\n    return parent.querySelector(target);\\\\n  }\\\\n  return document.querySelector(target);\\\\n};\\\\n\\\\nvar getElement = (function (fn) {\\\\n\\\\tvar memo = {};\\\\n\\\\n\\\\treturn function(target, parent) {\\\\n                // If passing function in options, then use it for resolve \\\\\\"head\\\\\\" element.\\\\n                // Useful for Shadow Root style i.e\\\\n                // {\\\\n                //   insertInto: function () { return document.querySelector(\\\\\\"#foo\\\\\\").shadowRoot }\\\\n                // }\\\\n                if (typeof target === 'function') {\\\\n                        return target();\\\\n                }\\\\n                if (typeof memo[target] === \\\\\\"undefined\\\\\\") {\\\\n\\\\t\\\\t\\\\tvar styleTarget = getTarget.call(this, target, parent);\\\\n\\\\t\\\\t\\\\t// Special case to return head of iframe instead of iframe itself\\\\n\\\\t\\\\t\\\\tif (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\\\\n\\\\t\\\\t\\\\t\\\\ttry {\\\\n\\\\t\\\\t\\\\t\\\\t\\\\t// This will throw an exception if access to iframe is blocked\\\\n\\\\t\\\\t\\\\t\\\\t\\\\t// due to cross-origin restrictions\\\\n\\\\t\\\\t\\\\t\\\\t\\\\tstyleTarget = styleTarget.contentDocument.head;\\\\n\\\\t\\\\t\\\\t\\\\t} catch(e) {\\\\n\\\\t\\\\t\\\\t\\\\t\\\\tstyleTarget = null;\\\\n\\\\t\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t\\\\tmemo[target] = styleTarget;\\\\n\\\\t\\\\t}\\\\n\\\\t\\\\treturn memo[target]\\\\n\\\\t};\\\\n})();\\\\n\\\\nvar singleton = null;\\\\nvar\\\\tsingletonCounter = 0;\\\\nvar\\\\tstylesInsertedAtTop = [];\\\\n\\\\nvar\\\\tfixUrls = __webpack_require__(/*! ./urls */ \\\\\\"./node_modules/style-loader/lib/urls.js\\\\\\");\\\\n\\\\nmodule.exports = function(list, options) {\\\\n\\\\tif (typeof DEBUG !== \\\\\\"undefined\\\\\\" && DEBUG) {\\\\n\\\\t\\\\tif (typeof document !== \\\\\\"object\\\\\\") throw new Error(\\\\\\"The style-loader cannot be used in a non-browser environment\\\\\\");\\\\n\\\\t}\\\\n\\\\n\\\\toptions = options || {};\\\\n\\\\n\\\\toptions.attrs = typeof options.attrs === \\\\\\"object\\\\\\" ? options.attrs : {};\\\\n\\\\n\\\\t// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\\\\n\\\\t// tags it will allow on a page\\\\n\\\\tif (!options.singleton && typeof options.singleton !== \\\\\\"boolean\\\\\\") options.singleton = isOldIE();\\\\n\\\\n\\\\t// By default, add <style> tags to the <head> element\\\\n        if (!options.insertInto) options.insertInto = \\\\\\"head\\\\\\";\\\\n\\\\n\\\\t// By default, add <style> tags to the bottom of the target\\\\n\\\\tif (!options.insertAt) options.insertAt = \\\\\\"bottom\\\\\\";\\\\n\\\\n\\\\tvar styles = listToStyles(list, options);\\\\n\\\\n\\\\taddStylesToDom(styles, options);\\\\n\\\\n\\\\treturn function update (newList) {\\\\n\\\\t\\\\tvar mayRemove = [];\\\\n\\\\n\\\\t\\\\tfor (var i = 0; i < styles.length; i++) {\\\\n\\\\t\\\\t\\\\tvar item = styles[i];\\\\n\\\\t\\\\t\\\\tvar domStyle = stylesInDom[item.id];\\\\n\\\\n\\\\t\\\\t\\\\tdomStyle.refs--;\\\\n\\\\t\\\\t\\\\tmayRemove.push(domStyle);\\\\n\\\\t\\\\t}\\\\n\\\\n\\\\t\\\\tif(newList) {\\\\n\\\\t\\\\t\\\\tvar newStyles = listToStyles(newList, options);\\\\n\\\\t\\\\t\\\\taddStylesToDom(newStyles, options);\\\\n\\\\t\\\\t}\\\\n\\\\n\\\\t\\\\tfor (var i = 0; i < mayRemove.length; i++) {\\\\n\\\\t\\\\t\\\\tvar domStyle = mayRemove[i];\\\\n\\\\n\\\\t\\\\t\\\\tif(domStyle.refs === 0) {\\\\n\\\\t\\\\t\\\\t\\\\tfor (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();\\\\n\\\\n\\\\t\\\\t\\\\t\\\\tdelete stylesInDom[domStyle.id];\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n};\\\\n\\\\nfunction addStylesToDom (styles, options) {\\\\n\\\\tfor (var i = 0; i < styles.length; i++) {\\\\n\\\\t\\\\tvar item = styles[i];\\\\n\\\\t\\\\tvar domStyle = stylesInDom[item.id];\\\\n\\\\n\\\\t\\\\tif(domStyle) {\\\\n\\\\t\\\\t\\\\tdomStyle.refs++;\\\\n\\\\n\\\\t\\\\t\\\\tfor(var j = 0; j < domStyle.parts.length; j++) {\\\\n\\\\t\\\\t\\\\t\\\\tdomStyle.parts[j](item.parts[j]);\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\n\\\\t\\\\t\\\\tfor(; j < item.parts.length; j++) {\\\\n\\\\t\\\\t\\\\t\\\\tdomStyle.parts.push(addStyle(item.parts[j], options));\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t} else {\\\\n\\\\t\\\\t\\\\tvar parts = [];\\\\n\\\\n\\\\t\\\\t\\\\tfor(var j = 0; j < item.parts.length; j++) {\\\\n\\\\t\\\\t\\\\t\\\\tparts.push(addStyle(item.parts[j], options));\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\n\\\\t\\\\t\\\\tstylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};\\\\n\\\\t\\\\t}\\\\n\\\\t}\\\\n}\\\\n\\\\nfunction listToStyles (list, options) {\\\\n\\\\tvar styles = [];\\\\n\\\\tvar newStyles = {};\\\\n\\\\n\\\\tfor (var i = 0; i < list.length; i++) {\\\\n\\\\t\\\\tvar item = list[i];\\\\n\\\\t\\\\tvar id = options.base ? item[0] + options.base : item[0];\\\\n\\\\t\\\\tvar css = item[1];\\\\n\\\\t\\\\tvar media = item[2];\\\\n\\\\t\\\\tvar sourceMap = item[3];\\\\n\\\\t\\\\tvar part = {css: css, media: media, sourceMap: sourceMap};\\\\n\\\\n\\\\t\\\\tif(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});\\\\n\\\\t\\\\telse newStyles[id].parts.push(part);\\\\n\\\\t}\\\\n\\\\n\\\\treturn styles;\\\\n}\\\\n\\\\nfunction insertStyleElement (options, style) {\\\\n\\\\tvar target = getElement(options.insertInto)\\\\n\\\\n\\\\tif (!target) {\\\\n\\\\t\\\\tthrow new Error(\\\\\\"Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.\\\\\\");\\\\n\\\\t}\\\\n\\\\n\\\\tvar lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];\\\\n\\\\n\\\\tif (options.insertAt === \\\\\\"top\\\\\\") {\\\\n\\\\t\\\\tif (!lastStyleElementInsertedAtTop) {\\\\n\\\\t\\\\t\\\\ttarget.insertBefore(style, target.firstChild);\\\\n\\\\t\\\\t} else if (lastStyleElementInsertedAtTop.nextSibling) {\\\\n\\\\t\\\\t\\\\ttarget.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);\\\\n\\\\t\\\\t} else {\\\\n\\\\t\\\\t\\\\ttarget.appendChild(style);\\\\n\\\\t\\\\t}\\\\n\\\\t\\\\tstylesInsertedAtTop.push(style);\\\\n\\\\t} else if (options.insertAt === \\\\\\"bottom\\\\\\") {\\\\n\\\\t\\\\ttarget.appendChild(style);\\\\n\\\\t} else if (typeof options.insertAt === \\\\\\"object\\\\\\" && options.insertAt.before) {\\\\n\\\\t\\\\tvar nextSibling = getElement(options.insertAt.before, target);\\\\n\\\\t\\\\ttarget.insertBefore(style, nextSibling);\\\\n\\\\t} else {\\\\n\\\\t\\\\tthrow new Error(\\\\\\"[Style Loader]\\\\\\\\n\\\\\\\\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\\\\\\\\n Must be 'top', 'bottom', or Object.\\\\\\\\n (https://github.com/webpack-contrib/style-loader#insertat)\\\\\\\\n\\\\\\");\\\\n\\\\t}\\\\n}\\\\n\\\\nfunction removeStyleElement (style) {\\\\n\\\\tif (style.parentNode === null) return false;\\\\n\\\\tstyle.parentNode.removeChild(style);\\\\n\\\\n\\\\tvar idx = stylesInsertedAtTop.indexOf(style);\\\\n\\\\tif(idx >= 0) {\\\\n\\\\t\\\\tstylesInsertedAtTop.splice(idx, 1);\\\\n\\\\t}\\\\n}\\\\n\\\\nfunction createStyleElement (options) {\\\\n\\\\tvar style = document.createElement(\\\\\\"style\\\\\\");\\\\n\\\\n\\\\tif(options.attrs.type === undefined) {\\\\n\\\\t\\\\toptions.attrs.type = \\\\\\"text/css\\\\\\";\\\\n\\\\t}\\\\n\\\\n\\\\tif(options.attrs.nonce === undefined) {\\\\n\\\\t\\\\tvar nonce = getNonce();\\\\n\\\\t\\\\tif (nonce) {\\\\n\\\\t\\\\t\\\\toptions.attrs.nonce = nonce;\\\\n\\\\t\\\\t}\\\\n\\\\t}\\\\n\\\\n\\\\taddAttrs(style, options.attrs);\\\\n\\\\tinsertStyleElement(options, style);\\\\n\\\\n\\\\treturn style;\\\\n}\\\\n\\\\nfunction createLinkElement (options) {\\\\n\\\\tvar link = document.createElement(\\\\\\"link\\\\\\");\\\\n\\\\n\\\\tif(options.attrs.type === undefined) {\\\\n\\\\t\\\\toptions.attrs.type = \\\\\\"text/css\\\\\\";\\\\n\\\\t}\\\\n\\\\toptions.attrs.rel = \\\\\\"stylesheet\\\\\\";\\\\n\\\\n\\\\taddAttrs(link, options.attrs);\\\\n\\\\tinsertStyleElement(options, link);\\\\n\\\\n\\\\treturn link;\\\\n}\\\\n\\\\nfunction addAttrs (el, attrs) {\\\\n\\\\tObject.keys(attrs).forEach(function (key) {\\\\n\\\\t\\\\tel.setAttribute(key, attrs[key]);\\\\n\\\\t});\\\\n}\\\\n\\\\nfunction getNonce() {\\\\n\\\\tif (false) {}\\\\n\\\\n\\\\treturn __webpack_require__.nc;\\\\n}\\\\n\\\\nfunction addStyle (obj, options) {\\\\n\\\\tvar style, update, remove, result;\\\\n\\\\n\\\\t// If a transform function was defined, run it on the css\\\\n\\\\tif (options.transform && obj.css) {\\\\n\\\\t    result = typeof options.transform === 'function'\\\\n\\\\t\\\\t ? options.transform(obj.css) \\\\n\\\\t\\\\t : options.transform.default(obj.css);\\\\n\\\\n\\\\t    if (result) {\\\\n\\\\t    \\\\t// If transform returns a value, use that instead of the original css.\\\\n\\\\t    \\\\t// This allows running runtime transformations on the css.\\\\n\\\\t    \\\\tobj.css = result;\\\\n\\\\t    } else {\\\\n\\\\t    \\\\t// If the transform function returns a falsy value, don't add this css.\\\\n\\\\t    \\\\t// This allows conditional loading of css\\\\n\\\\t    \\\\treturn function() {\\\\n\\\\t    \\\\t\\\\t// noop\\\\n\\\\t    \\\\t};\\\\n\\\\t    }\\\\n\\\\t}\\\\n\\\\n\\\\tif (options.singleton) {\\\\n\\\\t\\\\tvar styleIndex = singletonCounter++;\\\\n\\\\n\\\\t\\\\tstyle = singleton || (singleton = createStyleElement(options));\\\\n\\\\n\\\\t\\\\tupdate = applyToSingletonTag.bind(null, style, styleIndex, false);\\\\n\\\\t\\\\tremove = applyToSingletonTag.bind(null, style, styleIndex, true);\\\\n\\\\n\\\\t} else if (\\\\n\\\\t\\\\tobj.sourceMap &&\\\\n\\\\t\\\\ttypeof URL === \\\\\\"function\\\\\\" &&\\\\n\\\\t\\\\ttypeof URL.createObjectURL === \\\\\\"function\\\\\\" &&\\\\n\\\\t\\\\ttypeof URL.revokeObjectURL === \\\\\\"function\\\\\\" &&\\\\n\\\\t\\\\ttypeof Blob === \\\\\\"function\\\\\\" &&\\\\n\\\\t\\\\ttypeof btoa === \\\\\\"function\\\\\\"\\\\n\\\\t) {\\\\n\\\\t\\\\tstyle = createLinkElement(options);\\\\n\\\\t\\\\tupdate = updateLink.bind(null, style, options);\\\\n\\\\t\\\\tremove = function () {\\\\n\\\\t\\\\t\\\\tremoveStyleElement(style);\\\\n\\\\n\\\\t\\\\t\\\\tif(style.href) URL.revokeObjectURL(style.href);\\\\n\\\\t\\\\t};\\\\n\\\\t} else {\\\\n\\\\t\\\\tstyle = createStyleElement(options);\\\\n\\\\t\\\\tupdate = applyToTag.bind(null, style);\\\\n\\\\t\\\\tremove = function () {\\\\n\\\\t\\\\t\\\\tremoveStyleElement(style);\\\\n\\\\t\\\\t};\\\\n\\\\t}\\\\n\\\\n\\\\tupdate(obj);\\\\n\\\\n\\\\treturn function updateStyle (newObj) {\\\\n\\\\t\\\\tif (newObj) {\\\\n\\\\t\\\\t\\\\tif (\\\\n\\\\t\\\\t\\\\t\\\\tnewObj.css === obj.css &&\\\\n\\\\t\\\\t\\\\t\\\\tnewObj.media === obj.media &&\\\\n\\\\t\\\\t\\\\t\\\\tnewObj.sourceMap === obj.sourceMap\\\\n\\\\t\\\\t\\\\t) {\\\\n\\\\t\\\\t\\\\t\\\\treturn;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\n\\\\t\\\\t\\\\tupdate(obj = newObj);\\\\n\\\\t\\\\t} else {\\\\n\\\\t\\\\t\\\\tremove();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nvar replaceText = (function () {\\\\n\\\\tvar textStore = [];\\\\n\\\\n\\\\treturn function (index, replacement) {\\\\n\\\\t\\\\ttextStore[index] = replacement;\\\\n\\\\n\\\\t\\\\treturn textStore.filter(Boolean).join('\\\\\\\\n');\\\\n\\\\t};\\\\n})();\\\\n\\\\nfunction applyToSingletonTag (style, index, remove, obj) {\\\\n\\\\tvar css = remove ? \\\\\\"\\\\\\" : obj.css;\\\\n\\\\n\\\\tif (style.styleSheet) {\\\\n\\\\t\\\\tstyle.styleSheet.cssText = replaceText(index, css);\\\\n\\\\t} else {\\\\n\\\\t\\\\tvar cssNode = document.createTextNode(css);\\\\n\\\\t\\\\tvar childNodes = style.childNodes;\\\\n\\\\n\\\\t\\\\tif (childNodes[index]) style.removeChild(childNodes[index]);\\\\n\\\\n\\\\t\\\\tif (childNodes.length) {\\\\n\\\\t\\\\t\\\\tstyle.insertBefore(cssNode, childNodes[index]);\\\\n\\\\t\\\\t} else {\\\\n\\\\t\\\\t\\\\tstyle.appendChild(cssNode);\\\\n\\\\t\\\\t}\\\\n\\\\t}\\\\n}\\\\n\\\\nfunction applyToTag (style, obj) {\\\\n\\\\tvar css = obj.css;\\\\n\\\\tvar media = obj.media;\\\\n\\\\n\\\\tif(media) {\\\\n\\\\t\\\\tstyle.setAttribute(\\\\\\"media\\\\\\", media)\\\\n\\\\t}\\\\n\\\\n\\\\tif(style.styleSheet) {\\\\n\\\\t\\\\tstyle.styleSheet.cssText = css;\\\\n\\\\t} else {\\\\n\\\\t\\\\twhile(style.firstChild) {\\\\n\\\\t\\\\t\\\\tstyle.removeChild(style.firstChild);\\\\n\\\\t\\\\t}\\\\n\\\\n\\\\t\\\\tstyle.appendChild(document.createTextNode(css));\\\\n\\\\t}\\\\n}\\\\n\\\\nfunction updateLink (link, options, obj) {\\\\n\\\\tvar css = obj.css;\\\\n\\\\tvar sourceMap = obj.sourceMap;\\\\n\\\\n\\\\t/*\\\\n\\\\t\\\\tIf convertToAbsoluteUrls isn't defined, but sourcemaps are enabled\\\\n\\\\t\\\\tand there is no publicPath defined then lets turn convertToAbsoluteUrls\\\\n\\\\t\\\\ton by default.  Otherwise default to the convertToAbsoluteUrls option\\\\n\\\\t\\\\tdirectly\\\\n\\\\t*/\\\\n\\\\tvar autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;\\\\n\\\\n\\\\tif (options.convertToAbsoluteUrls || autoFixUrls) {\\\\n\\\\t\\\\tcss = fixUrls(css);\\\\n\\\\t}\\\\n\\\\n\\\\tif (sourceMap) {\\\\n\\\\t\\\\t// http://stackoverflow.com/a/26603875\\\\n\\\\t\\\\tcss += \\\\\\"\\\\\\\\n/*# sourceMappingURL=data:application/json;base64,\\\\\\" + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + \\\\\\" */\\\\\\";\\\\n\\\\t}\\\\n\\\\n\\\\tvar blob = new Blob([css], { type: \\\\\\"text/css\\\\\\" });\\\\n\\\\n\\\\tvar oldSrc = link.href;\\\\n\\\\n\\\\tlink.href = URL.createObjectURL(blob);\\\\n\\\\n\\\\tif(oldSrc) URL.revokeObjectURL(oldSrc);\\\\n}\\\\n\\\\n\\\\n//# sourceURL=webpack:///./node_modules/style-loader/lib/addStyles.js?\\");
-
-/***/ }),
-
-/***/ \\"./node_modules/style-loader/lib/urls.js\\":
-/*!***********************************************!*\\\\
-  !*** ./node_modules/style-loader/lib/urls.js ***!
-  \\\\***********************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-eval(\\"\\\\n/**\\\\n * When source maps are enabled, \`style-loader\` uses a link element with a data-uri to\\\\n * embed the css on the page. This breaks all relative urls because now they are relative to a\\\\n * bundle instead of the current page.\\\\n *\\\\n * One solution is to only use full urls, but that may be impossible.\\\\n *\\\\n * Instead, this function \\\\\\"fixes\\\\\\" the relative urls to be absolute according to the current page location.\\\\n *\\\\n * A rudimentary test suite is located at \`test/fixUrls.js\` and can be run via the \`npm test\` command.\\\\n *\\\\n */\\\\n\\\\nmodule.exports = function (css) {\\\\n  // get current location\\\\n  var location = typeof window !== \\\\\\"undefined\\\\\\" && window.location;\\\\n\\\\n  if (!location) {\\\\n    throw new Error(\\\\\\"fixUrls requires window.location\\\\\\");\\\\n  }\\\\n\\\\n\\\\t// blank or null?\\\\n\\\\tif (!css || typeof css !== \\\\\\"string\\\\\\") {\\\\n\\\\t  return css;\\\\n  }\\\\n\\\\n  var baseUrl = location.protocol + \\\\\\"//\\\\\\" + location.host;\\\\n  var currentDir = baseUrl + location.pathname.replace(/\\\\\\\\/[^\\\\\\\\/]*$/, \\\\\\"/\\\\\\");\\\\n\\\\n\\\\t// convert each url(...)\\\\n\\\\t/*\\\\n\\\\tThis regular expression is just a way to recursively match brackets within\\\\n\\\\ta string.\\\\n\\\\n\\\\t /url\\\\\\\\s*\\\\\\\\(  = Match on the word \\\\\\"url\\\\\\" with any whitespace after it and then a parens\\\\n\\\\t   (  = Start a capturing group\\\\n\\\\t     (?:  = Start a non-capturing group\\\\n\\\\t         [^)(]  = Match anything that isn't a parentheses\\\\n\\\\t         |  = OR\\\\n\\\\t         \\\\\\\\(  = Match a start parentheses\\\\n\\\\t             (?:  = Start another non-capturing groups\\\\n\\\\t                 [^)(]+  = Match anything that isn't a parentheses\\\\n\\\\t                 |  = OR\\\\n\\\\t                 \\\\\\\\(  = Match a start parentheses\\\\n\\\\t                     [^)(]*  = Match anything that isn't a parentheses\\\\n\\\\t                 \\\\\\\\)  = Match a end parentheses\\\\n\\\\t             )  = End Group\\\\n              *\\\\\\\\) = Match anything and then a close parens\\\\n          )  = Close non-capturing group\\\\n          *  = Match anything\\\\n       )  = Close capturing group\\\\n\\\\t \\\\\\\\)  = Match a close parens\\\\n\\\\n\\\\t /gi  = Get all matches, not the first.  Be case insensitive.\\\\n\\\\t */\\\\n\\\\tvar fixedCss = css.replace(/url\\\\\\\\s*\\\\\\\\(((?:[^)(]|\\\\\\\\((?:[^)(]+|\\\\\\\\([^)(]*\\\\\\\\))*\\\\\\\\))*)\\\\\\\\)/gi, function(fullMatch, origUrl) {\\\\n\\\\t\\\\t// strip quotes (if they exist)\\\\n\\\\t\\\\tvar unquotedOrigUrl = origUrl\\\\n\\\\t\\\\t\\\\t.trim()\\\\n\\\\t\\\\t\\\\t.replace(/^\\\\\\"(.*)\\\\\\"$/, function(o, $1){ return $1; })\\\\n\\\\t\\\\t\\\\t.replace(/^'(.*)'$/, function(o, $1){ return $1; });\\\\n\\\\n\\\\t\\\\t// already a full url? no change\\\\n\\\\t\\\\tif (/^(#|data:|http:\\\\\\\\/\\\\\\\\/|https:\\\\\\\\/\\\\\\\\/|file:\\\\\\\\/\\\\\\\\/\\\\\\\\/|\\\\\\\\s*$)/i.test(unquotedOrigUrl)) {\\\\n\\\\t\\\\t  return fullMatch;\\\\n\\\\t\\\\t}\\\\n\\\\n\\\\t\\\\t// convert the url to a full url\\\\n\\\\t\\\\tvar newUrl;\\\\n\\\\n\\\\t\\\\tif (unquotedOrigUrl.indexOf(\\\\\\"//\\\\\\") === 0) {\\\\n\\\\t\\\\t  \\\\t//TODO: should we add protocol?\\\\n\\\\t\\\\t\\\\tnewUrl = unquotedOrigUrl;\\\\n\\\\t\\\\t} else if (unquotedOrigUrl.indexOf(\\\\\\"/\\\\\\") === 0) {\\\\n\\\\t\\\\t\\\\t// path should be relative to the base url\\\\n\\\\t\\\\t\\\\tnewUrl = baseUrl + unquotedOrigUrl; // already starts with '/'\\\\n\\\\t\\\\t} else {\\\\n\\\\t\\\\t\\\\t// path should be relative to current directory\\\\n\\\\t\\\\t\\\\tnewUrl = currentDir + unquotedOrigUrl.replace(/^\\\\\\\\.\\\\\\\\//, \\\\\\"\\\\\\"); // Strip leading './'\\\\n\\\\t\\\\t}\\\\n\\\\n\\\\t\\\\t// send back the fixed url(...)\\\\n\\\\t\\\\treturn \\\\\\"url(\\\\\\" + JSON.stringify(newUrl) + \\\\\\")\\\\\\";\\\\n\\\\t});\\\\n\\\\n\\\\t// send back the fixed css\\\\n\\\\treturn fixedCss;\\\\n};\\\\n\\\\n\\\\n//# sourceURL=webpack:///./node_modules/style-loader/lib/urls.js?\\");
-
-/***/ }),
-
 /***/ \\"./test/scss-glob/src/index.js\\":
 /*!*************************************!*\\\\
   !*** ./test/scss-glob/src/index.js ***!
@@ -153,7 +108,7 @@ eval(\\"__webpack_require__.r(__webpack_exports__);\\\\n/* harmony import */ var
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval(\\"\\\\nvar content = __webpack_require__(/*! !../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/resolve-url-loader!../../../node_modules/sass-loader/lib/loader.js??ref--6-3!./test.scss */ \\\\\\"./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./test/scss-glob/src/test.scss\\\\\\");\\\\n\\\\nif(typeof content === 'string') content = [[module.i, content, '']];\\\\n\\\\nvar transform;\\\\nvar insertInto;\\\\n\\\\n\\\\n\\\\nvar options = {\\\\\\"hmr\\\\\\":true}\\\\n\\\\noptions.transform = transform\\\\noptions.insertInto = undefined;\\\\n\\\\nvar update = __webpack_require__(/*! ../../../node_modules/style-loader/lib/addStyles.js */ \\\\\\"./node_modules/style-loader/lib/addStyles.js\\\\\\")(content, options);\\\\n\\\\nif(content.locals) module.exports = content.locals;\\\\n\\\\nif(false) {}\\\\n\\\\n//# sourceURL=webpack:///./test/scss-glob/src/test.scss?\\");
+eval(\\"// extracted by mini-css-extract-plugin\\\\n\\\\n//# sourceURL=webpack:///./test/scss-glob/src/test.scss?\\");
 
 /***/ })
 
diff --git a/test/scss/test.spec.ts b/test/scss/test.spec.ts
index c82f72f..608d4d6 100644
--- a/test/scss/test.spec.ts
+++ b/test/scss/test.spec.ts
@@ -18,44 +18,32 @@ it('should compile scss', async () => {
       },
     },
     'development',
-    );
+  );
   const output = stats.toJson();
 
   expect(output.assets.length).toBe(1);
+  expect(output.assets[0].name).toBe('main.js');
 });
 
-it('should not compile external scss on development', async () => {
-  const statsDevelopment = await compiler(
-    {
-      ...baseConfig,
-      features: {
-        styles: {
-          scss: true,
-          extractToFile: true,
-        },
+it('should extract scss', async () => {
+  const options =  {
+    ...baseConfig,
+    features: {
+      styles: {
+        scss: true,
+        extractToFile: true,
       },
     },
-    'development',
-    );
-  const output = statsDevelopment.toJson();
+  };
+  const productionStats = (await compiler(options, 'production')).toJson();
 
-  expect(output.assets.length).toBe(1);
-});
+  expect(productionStats.assets.length).toBe(2);
+  expect(productionStats.assets[0].name).toBe('main.css');
+  expect(productionStats.assets[1].name).toBe('main.js');
 
-it('should compile external scss on production', async () => {
-  const stats = await compiler(
-    {
-      ...baseConfig,
-      features: {
-        styles: {
-          scss: true,
-          extractToFile: true,
-        },
-      },
-    },
-    'production',
-    );
-  const output = stats.toJson();
+  const developmentStats = (await compiler(options, 'development')).toJson();
 
-  expect(output.assets.length).toBe(2);
+  expect(developmentStats.assets.length).toBe(2);
+  expect(developmentStats.assets[0].name).toBe('main.css');
+  expect(developmentStats.assets[1].name).toBe('main.js');
 });
diff --git a/yarn.lock b/yarn.lock
index 2447fd2..999d63a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13479,6 +13479,11 @@ webpack-dev-server@^3.1.14:
     webpack-log "^2.0.0"
     yargs "12.0.2"
 
+webpack-fix-style-only-entries@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-fix-style-only-entries/-/webpack-fix-style-only-entries-0.2.1.tgz#c8945b034ea1e17407032de24b4f458f5d03b8b0"
+  integrity sha512-3e24v2C0/gquiHTZolVHdiAJKNxDnvqPyR4x2WAjbwMC7KPdACTn8YilcqsFYjHZtbaRmqOuh6kKqPmhsG+L8w==
+
 webpack-hot-client@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/webpack-hot-client/-/webpack-hot-client-3.0.0.tgz#b714f257a264001275bc1491741685779cde12f2"