title: Slow building angular 6 of webpack
body: <p>My app migrate from Angular 4  to angular 6 and i switched VS15 to VS17 (stack of angular and asp.net core 2+). 
  Before this dev build spend about 3 minutes. Now it's taking about 20-25 minutes.</p>
  
  <p>I already tried change devtool to eval or false, also tried webpack-node-externals. Still same time. </p>
  
  <p>Here is my configuration: </p>
  
  <p>package.json</p>
  
  <pre><code>"scripts": {
      "start": "concurrently \"webpack-dev-server --env=dev --open --hot --inline --port 8080\" \"dotnet run\" ",
      "webpack-dev": "webpack --env=dev --progress --profile",
      "webpack-production": "webpack --env=prod",
      "build-dev": "npm run webpack-dev",
      "build-aot-production": "npm run webpack-production",
      "watch-webpack-dev": "webpack --env=dev --watch --color",
      "watch-webpack-production": "npm run build-production --watch --color",
      "publish-for-iis": "npm run webpack-production &amp;&amp; dotnet publish -c Release",
      "build": "npm run webpack-production &amp;&amp; dotnet publish -c Release",
      "build-prod": "npm run webpack-production &amp;&amp; dotnet publish -c Release"
    },
    "dependencies": {
      "@angular-devkit/core": "0.8.1",
      "@angular/animations": "6.1.7",
      "@angular/common": "6.1.7",
      "@angular/compiler": "6.1.7",
      "@angular/compiler-cli": "^6.1.8",
      "@angular/core": "6.1.7",
      "@angular/forms": "6.1.7",
      "@angular/http": "6.1.7",
      "@angular/platform-browser": "6.1.7",
      "@angular/platform-browser-dynamic": "6.1.7",
      "@angular/platform-server": "6.1.7",
      "@angular/router": "6.1.7",
      "@angular/upgrade": "6.1.7",
      "@types/file-saver": "0.0.1",
      "ajv": "5.2.3",
      "angular2-modal": "3.0.3",
      "angular2-text-mask": "8.0.4",
      "bootstrap": "3.3.7",
      "core-js": "2.5.1",
      "file-saver": "^1.3.8",
      "http-proxy-middleware": "0.17.4",
      "ie-shim": "0.1.0",
      "intl": "1.2.5",
      "moment": "2.18.1",
      "ng-select": "^1.0.1",
      "ngc": "^1.0.0",
      "pdfmake": "0.1.33",
      "reflect-metadata": "~0.1.10",
      "rxjs": "6.3.2",
      "rxjs-compat": "6.3.2",
      "systemjs": "0.19.39",
      "tslib": "1.7.1",
      "zone.js": "0.8.26"
    },
    "devDependencies": {
      "@types/jquery": "3.2.12",
      "@ngtools/webpack": "^6.2.1",
      "@types/node": "^10.9.4",
      "@types/express": "4.0.37",
      "@angular/cli": "^6.0.7",
      "angular-router-loader": "0.6.0",
      "angular2-template-loader": "0.6.2",
      "awesome-typescript-loader": "3.2.3",
      "babel-core": "6.26.0",
      "babel-loader": "7.1.2",
      "clean-webpack-plugin": "0.1.16",
      "concurrently": "3.5.0",
      "copy-webpack-plugin": "^4.5.2",
      "css-loader": "0.23.1",
      "file-loader": "^2.0.0",
      "html-loader": "0.5.1",
      "html-webpack-plugin": "^3.2.0",
      "jquery": "3.2.1",
      "json-loader": "0.5.7",
      "last": "1.1.0",
      "raw-loader": "0.5.1",
      "rimraf": "2.6.2",
      "source-map-loader": "^0.2.4",
      "style-loader": "^0.23.0",
      "to-string-loader": "1.1.5",
      "ts-node": "3.3.0",
      "tslint": "4.5.1",
      "tslint-loader": "3.5.3",
      "typescript": "2.7.2",
      "typings": "2.1.1",
      "url-loader": "^1.1.1",
      "webpack": "4.19.0",
      "webpack-dev-server": "^3.1.8",
      "webpack-cli": "^2.0.9",
      "webpack-bundle-analyzer": "^2.13.1",
      "webpack-notifier": "1.5.0",
      "webpack-node-externals": "^1.7.2",
      "uglifyjs-webpack-plugin": "^1.3.0"
    }
  </code></pre>
  
  <p>webpack.js: </p>
  
  <pre><code>const path = require('path');
  const rxPaths = require('rxjs/_esm5/path-mapping');
  
  const webpack = require('webpack');
  const webpackTools = require('@ngtools/webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const nodeExternals = require('webpack-node-externals');
  
  
  
  const ROOT = path.resolve(__dirname, '..');
  
  console.log('-----------------------DEV BUILD:');
  
  module.exports = {
    mode: 'development',
    devtool: 'source-map',
    performance: {
      hints: false
    },
    externals: [nodeExternals()],
    entry: {
      app: './app/main.ts'
    },
  
    output: {
      path: ROOT + '/wwwroot/',
      filename: 'dist/[name].bundle.js',
      publicPath: '/'
    },
  
    resolve: {
      extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
    },
  
    devServer: {
      historyApiFallback: true,
      contentBase: path.join(ROOT, '/wwwroot/'),
      watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
      }
    },
  
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: [
            'awesome-typescript-loader',
            'angular-router-loader',
            'angular2-template-loader',
            'source-map-loader'
          ]
        },
        {
          test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot|ico)$/,
          use: 'file-loader?name=assets/[name].[ext]'
        },
  
        {
          test: /\.css$/,
          exclude: ['/node_modules/', '/fedresurs-app/css/'],
          loaders: ['to-string-loader', 'css-loader']
        },
        {
          test: /\.css$/,
          include: ['./fedresurs-app/css/'],
          exclude: ['/node_modules/'],
          loaders: ['style-loader']
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ["style-loader", "css-loader", "sass-loader"]
        },
        {
          test: /\.html$/,
          use: 'raw-loader'
        },
        {
          test: /\.(eot|ttf|woff|woff2|otf)$/,
          loader: 'file-loader?name=fonts/[name].[ext]'
        }
      ],
      exprContextCritical: false
    },
    plugins: [
      function () {
        this.plugin('watch-run', function (watching, callback) {
          console.log(
            '\x1b[33m%s\x1b[0m',
            `Begin compile at ${new Date().toTimeString()}`
          );
          callback();
        });
      },
  
      new webpackTools.AngularCompilerPlugin({
        tsConfigPath: './tsconfig.json'
      }),
      new webpack.optimize.ModuleConcatenationPlugin(),
  
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      }),
  
     ,
  
      new CleanWebpackPlugin(['./wwwroot/dist', './wwwroot/assets'], {
        root: ROOT
      }),
  
      new HtmlWebpackPlugin({
        filename: 'index.html',
        inject: 'body',
        template: 'app/index.html'
      })
    ]
  };
  </code></pre>
  
  <p>tsconfig.json:</p>
  
  <blockquote>
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false,
      "skipLibCheck": true,
      "noUnusedLocals": false,
      "noUnusedParameters": false,
      "lib": [
        "es2015",
        "dom"
      ],
      "typeRoots": [
        "./node_modules/@types/"
      ]
    },
    "exclude": [
      "node_modules",
      "./app/main-aot.ts",
      "./app/app/main-aot.ts"
    ],
    "awesomeTypescriptLoaderOptions": {
      "useWebpackText": true
    },
    "files": [
      "app/typings.d.ts"
    ],
    "compileOnSave": false,
    "buildOnSave": false
  }
  </code></pre>
  </blockquote>
  
  <p>Builder told me that i have 1143  modules. And i get extremely slow dependencies build just look</p>
  
  <pre><code>app/app/app-routing.module.ts 3.24 KiB [built]
      |     [] 13483ms -&gt; [] 232ms -&gt; factory:24022ms building:7ms dependencies:196551ms = 234295ms
  </code></pre>