Some progress

src/Squidex/app-config/webpack.config.js

@@ -1,9 +1,9 @@
-        var webpack = require('webpack'),
+var webpack = require('webpack'),
-               path = require('path'),
+    path = require('path'),
-  HtmlWebpackPlugin = require('html-webpack-plugin'),
+    HtmlWebpackPlugin = require('html-webpack-plugin'),
-  ExtractTextPlugin = require('extract-text-webpack-plugin'),
+    MiniCssExtractPlugin = require('mini-css-extract-plugin'),
-TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'),
+    TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'),
-            helpers = require('./helpers');
+    helpers = require('./helpers');
 
 module.exports = {
     /**
@@ -21,7 +21,6 @@ module.exports = {
         modules: [
             helpers.root('app'),
             helpers.root('app', 'theme'),
-            helpers.root('app-libs'),
             helpers.root('node_modules')
         ],
 
@@ -45,19 +44,19 @@ module.exports = {
             {
                 test: /\.ts$/,
                 use: [{
-                    loader: 'awesome-typescript-loader' 
+                    loader: 'awesome-typescript-loader'
                 }, {
                     loader: 'angular2-router-loader'
                 }, {
                     loader: 'angular2-template-loader'
                 }, {
-                    loader: 'tslint-loader' 
+                    loader: 'tslint-loader'
                 }],
                 exclude: /node_modules/
             }, {
                 test: /\.ts$/,
                 use: [{
-                    loader: 'awesome-typescript-loader' 
+                    loader: 'awesome-typescript-loader'
                 }],
                 include: /node_modules/
             }, {
@@ -83,21 +82,17 @@ module.exports = {
                 }]
             }, {
                 test: /\.css$/,
-                /*
+                use: [
-                 * Extract the content from a bundle to a file
+                    MiniCssExtractPlugin.loader,
-                 * 
+                {
-                 * See: https://github.com/webpack-contrib/extract-text-webpack-plugin
+                    loader: 'css-loader'
-                 */
+                }]
-                use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
             }, {
                 test: /\.scss$/,
                 use: [{
                     loader: 'raw-loader'
                 }, {
-                    loader: 'sass-loader',
+                    loader: 'sass-loader', options: { includePaths: [helpers.root('app', 'theme')] }
-                    options: {
-                        includePaths: [helpers.root('app', 'theme')]
-                    }
                 }],
                 exclude: helpers.root('app', 'theme')
             }

src/Squidex/app-config/webpack.run.dev.js

@@ -1,7 +1,7 @@
-     var webpackMerge = require('webpack-merge'),
+    var webpackMerge = require('webpack-merge'),
-    ExtractTextPlugin = require('extract-text-webpack-plugin'),
+MiniCssExtractPlugin = require('mini-css-extract-plugin'),
-            runConfig = require('./webpack.run.base.js'),
+           runConfig = require('./webpack.run.base.js'),
-              helpers = require('./helpers');
+             helpers = require('./helpers');
 
 module.exports = webpackMerge(runConfig, {
     mode: 'development',
@@ -31,10 +31,7 @@ module.exports = webpackMerge(runConfig, {
                 }, {
                     loader: 'css-loader'
                 }, {
-                    loader: 'sass-loader?sourceMap',
+                    loader: 'sass-loader?sourceMap', options: { includePaths: [helpers.root('app', 'theme')] }
-                    options: {
-                        includePaths: [helpers.root('app', 'theme')]
-                    }
                 }],
                 include: helpers.root('app', 'theme')
             }
@@ -42,7 +39,12 @@ module.exports = webpackMerge(runConfig, {
     },
 
     plugins: [
-        new ExtractTextPlugin('[name].css')
+        /*
+         * Puts each bundle into a file and appends the hash of the file to the path.
+         * 
+         * See: https://github.com/webpack-contrib/mini-css-extract-plugin
+         */
+        new MiniCssExtractPlugin('[name].css'),
     ],
 
     devServer: {

src/Squidex/app-config/webpack.run.prod.js

@@ -1,9 +1,9 @@
-      var webpack = require('webpack'),
+         var webpack = require('webpack'),
-     webpackMerge = require('webpack-merge'),
+        webpackMerge = require('webpack-merge'),
-ExtractTextPlugin = require('extract-text-webpack-plugin'),
+MiniCssExtractPlugin = require('mini-css-extract-plugin'),
-   ngToolsWebpack = require('@ngtools/webpack'),
+      ngToolsWebpack = require('@ngtools/webpack'),
-        runConfig = require('./webpack.run.base.js'),
+           runConfig = require('./webpack.run.base.js'),
-          helpers = require('./helpers');
+             helpers = require('./helpers');
 
 helpers.removeLoaders(runConfig, ['scss', 'ts']);
 
@@ -56,7 +56,13 @@ module.exports = webpackMerge(runConfig, {
                  * 
                  * See: https://github.com/webpack-contrib/extract-text-webpack-plugin
                  */
-                use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?minimize!sass-loader?sourceMap' }),
+                use: [
+                    MiniCssExtractPlugin.loader,
+                {
+                    loader: 'css-loader'
+                }, {
+                    loader: 'sass-loader'
+                }],
                 /*
                  * Do not include component styles
                  */
@@ -66,10 +72,7 @@ module.exports = webpackMerge(runConfig, {
                 use: [{
                     loader: 'raw-loader'
                 }, {
-                    loader: 'sass-loader',
+                    loader: 'sass-loader', options: { includePaths: [helpers.root('app', 'theme')] }
-                    options: {
-                        includePaths: [helpers.root('app', 'theme')]
-                    }
                 }],
                 exclude: helpers.root('app', 'theme'),
             }, { 
@@ -85,9 +88,9 @@ module.exports = webpackMerge(runConfig, {
         /*
          * Puts each bundle into a file and appends the hash of the file to the path.
          * 
-         * See: https://github.com/webpack/extract-text-webpack-plugin
+         * See: https://github.com/webpack-contrib/mini-css-extract-plugin
          */
-        new ExtractTextPlugin('[name].css'),
+        new MiniCssExtractPlugin('[name].css'),
 
         new ngToolsWebpack.AngularCompilerPlugin({
             tsConfigPath: './tsconfig.json',

src/Squidex/package.json

@@ -9,7 +9,7 @@
     "test:coverage": "karma start karma.coverage.conf.js",
     "test:clean": "rimraf _test-output",
     "dev": "cpx node_modules/oidc-client/dist/oidc-client.min.js wwwroot/scripts/ && webpack-dev-server --config app-config/webpack.run.dev.js --inline --port 3000",
-    "build": "webpack --config app-config/webpack.run.prod.js",
+    "build": "webpack --config app-config/webpack.run.prod.js --progress",
     "build:copy": "cpx node_modules/oidc-client/dist/oidc-client.min.js wwwroot/scripts/",
     "build:clean": "rimraf wwwroot/build",
     "tslint": "tslint -c tslint.json -p tsconfig.json app/**/*.ts"
@@ -60,7 +60,6 @@
     "cpx": "1.5.0",
     "css-loader": "0.28.11",
     "exports-loader": "0.7.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "1.1.11",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
@@ -77,6 +76,7 @@
     "karma-mocha-reporter": "2.2.5",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "3.0.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "4.9.0",
     "noop-loader": "1.0.0",
     "null-loader": "0.1.1",