Using extract-text-webpack-plugin, style(less, scss) not working - less

Question

Unable to compile and run application with more then 8 modules using webpack 4 and lazy loading with AOT.
If i use ExtractTextWebpackPlugin to extract less file , Then webpack hangs at 70% and not give any error. At same time i remove ExtractTextWebpackPlugin and remove all stylesheet from application then webpack runs properly.
I have following devdependencies in package.json file:
"devDependencies": {
"#angular/compiler-cli": "5.2.9",
"#angularclass/hmr": "2.1.3",
"#angularclass/hmr-loader": "3.0.4",
"#ngtools/webpack": "6.0.0-rc.5",
"#types/node": "7.0.7",
"angular-mocks": "^1.6.2",
"angular-router-loader": "0.8.5",
"angular2-template-loader": "0.6.2",
"autoprefixer": "8.2.0",
"awesome-typescript-loader": "5.0.0",
"browserify": "^14.1.0",
"clean-webpack-plugin": "0.1.19",
"compression-webpack-plugin": "1.1.11",
"copy-webpack-plugin": "4.5.1",
"css-hot-loader": "^1.3.9",
"css-loader": "0.28.11",
"css-to-string-loader": "^0.1.3",
"csso-webpack-plugin": "1.0.0-beta.10",
"del": "latest",
"gulp": "^3.9.1",
"gulp-sass": "latest",
"gulp-sourcemaps": "latest",
"gulp-tslint": "latest",
"gulp-typescript": "latest",
"html-loader": "0.5.4",
"html-webpack-plugin": "2.30.1",
"http-server": "^0.10.0",
"iso-morphic-style-loader": "2.0.1",
"jasmine-core": "^2.6.4",
"karma": "2.0.0",
"karma-browserify": "^5.1.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "1.1.1",
"karma-phantomjs-launcher": "1.0.4",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.9",
"less": "2.7.3",
"less-loader": "4.0.5",
"merge-jsons-webpack-plugin": "1.0.14",
"mini-css-extract-plugin": "^0.4.0",
"postcss-loader": "^1.2.0",
"pushstate-server": "3.0.1",
"raw-loader": "^0.5.1",
"remap-istanbul": "^0.9.1",
"replace-webpack-plugin": "0.1.2",
"string-replace-loader": "2.1.1",
"style-loader": "^0.13.2",
"systemjs": "^0.19.27",
"systemjs-builder": "latest",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.2",
"tslint": "latest",
"typescript": "2.8.3",
"typings": "2.1.1",
"uglifyjs-webpack-plugin": "1.2.4",
"watchify": "^3.9.0",
"webpack": "4.5.0",
"webpack-cli": "2.0.14",
"webpack-merge": "4.1.2"
}
and following is webpack.config.js file:
var path = require('path');
var webpack = require('webpack');
var Autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var helpers = require('./webpack.helpers');
var MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin");
var AngularCompilerPlugin = require('#ngtools/webpack').AngularCompilerPlugin;
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var ReplacePlugin = require('replace-webpack-plugin');
module.exports = function (options)
{
isProd = options.env === 'production';
return {
mode: options.env,
entry: {
'polyfills': './polyfills.ts',
'intl': './datetimepolyfills.ts',
'globals': [
'reflect-metadata',
'rxjs'
],
'app': './public/app/main.ts', // our angular app
'style': './public/assets/style/app.less'
},
output: {
path: path.join(__dirname, 'wwwroot/'),
filename: 'app/[name]-[hash].bundle.js',
publicPath: "/"
},
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'app')
],
extensions: ['.ts', '.js', '.json', '.css', '.less', '.html']
},
module: {
rules:
[
{
test: /\.ts$/,
loaders:
[
'#ngtools/webpack',
'awesome-typescript-loader',
'angular2-template-loader?keepUrl=true',
'angular-router-loader'
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
loader: 'css-to-string-loader!iso-morphic-style-loader!css-loader'
},
{
test: /\.scss$/,
include: /node_modules/,
loader: 'css-to-string-loader!iso-morphic-style-loader!raw-loader'
},
{
test: /\.less$/,
exclude: helpers.root('node_modules', 'app'),
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['to-string-loader', 'css-loader', 'less-loader']
})
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['iso-morphic-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot|json)$/,
exclude: /node_modules/,
loader: "file?name=assets/[name]-[hash:6].[ext]",
}
],
},
plugins: [
new CleanWebpackPlugin(
[
'./wwwroot'
]
),
new ExtractTextPlugin("./assets/[name].css"),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: 'public/app/app.module#AppModule',
skipMetadataEmit: true
}),
new CopyWebpackPlugin([{
from: './node_modules/syx-general-components/src/fonts/**',
to: "./assets/fonts/",
flatten: true
}]),
new CopyWebpackPlugin([{
from: './node_modules/syx-general-components/src/scripts/**',
to: "./assets/scripts/",
flatten: true
}]),
new CopyWebpackPlugin([{
from: './node_modules/syx-general-components/src/img/**',
to: "./assets/img/",
flatten: true
}]),
new CopyWebpackPlugin([{
from: './public/assets/docs/*.*',
to: "./assets/docs/",
flatten: true
}]),
new CopyWebpackPlugin([{
from: './public/assets/img/*.*',
to: "./assets/img/",
flatten: true
}]),
new CopyWebpackPlugin([{
from: './public/config/*.*',
to: "./config/",
flatten: true
}]),
new ReplacePlugin({
entry: './public/index.html',
hash: '[hash]',
output: './wwwroot/index.html'
}),
new CopyWebpackPlugin([{
from: './public/print-ticket.html',
to: "./",
flatten: true
}]),
new CopyWebpackPlugin([{
from: './public/assets/scripts/**',
to: "./assets/scripts/",
flatten: true
}]),
new CopyWebpackPlugin([{
from: './public/favicon*',
to: "./",
flatten: true
}]),
new CopyWebpackPlugin([{
from: './public/favicon_*.*',
to: "./",
flatten: true
}]),
new webpack.optimize.ModuleConcatenationPlugin(),
new MergeJsonWebpackPlugin({
"output": {
"groupBy": [{
"pattern": "{./public/assets/locale/*-nl.json,./node_modules/syx-general-components/src/locale/*-nl.json}",
"fileName": "./assets/locale/locale-nl.json"
},
{
"pattern": "{./public/assets/locale/*-en.json,./node_modules/syx-general-components/src/locale/*-en.json}",
"fileName": "./assets/locale/locale-en.json"
},
{
"pattern": "{./public/assets/locale/*-fr.json,./node_modules/syx-general-components/src/locale/*-fr.json}",
"fileName": "./assets/locale/locale-fr.json"
}
]
}
})
],
optimization: {
noEmitOnErrors: true,
minimize: true,
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: true,
ecma: 5,
mangle: true
},
sourceMap: false
})
]
},
devServer: {
historyApiFallback: true,
stats: 'minimal',
outputPath: path.join(__dirname, 'wwwroot/')
}
}
};
If i use ExtractTextWebpackPlugin to extract less file , Then webpack hangs at 70%. At same time i remove ExtractTextWebpackPlugin and remove all stylesheet from application then webpack runs properly.
Can anyone help with this ?