title: Webpack: Taking a long time to build
body: <p>I have an issue with webpack build times in my react application. Everything builds fine but it takes a long time.</p>
  
  <p>Even I change just the JavaScript files the CSS rebuilds?</p>
  
  <p>Also the CSS compilation is taking a longer than I think it should be (correct me if I am wrong)?</p>
  
  <p>I am running a Core i7 with 16gb of Ram and the build is taking about a minute which is becoming very annoying during development when it's a one line change and you have to wait near enough a minute before you can see your changes in the browser?</p>
  
  <p>Is this the wrong approach?</p>
  
  <pre><code>const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const DashboardPlugin = require('webpack-dashboard/plugin');
  const path = require('path');
  const webpack = require('webpack');
  
  const BUILD_DIR = path.resolve(__dirname, '../dist');
  const APP_DIR = path.resolve(__dirname, 'src/');
  
  const config = {
      devtool: 'source-map',
      entry: {
          "ehcp-coordinator": [
              APP_DIR + '/index.js'
          ]
      },
  
      output: {
          path: `${BUILD_DIR}/js/`,
          filename: '[name].js',
          chunkFilename: '[name]-chunk.js',
      },
  
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['es2015', 'es2017', 'react', 'stage-0'],
                          plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties', 'syntax-dynamic-import',
                            ["import", {"libraryName": "antd",  "style": false}]]
                      }
                  }
              }, {
                  test: /\.less$/,
                  use: ExtractTextPlugin.extract({
                      use: [{
                          loader: "css-loader"
                      }, {
                          loader: "less-loader"
                      }]
                  })
              }
          ]
      },
  
      plugins: [
          new webpack.DefinePlugin({
              'process.env.NODE_ENV': "'development'"
          }),
          new webpack.optimize.UglifyJsPlugin({
              'sourceMap': 'source-map'
          }),
          new webpack.optimize.CommonsChunkPlugin({
              name: 'vendor',
              filename: '[name].js',
              minChunks(module, count) {
                  var context = module.context;
                  return context &amp;&amp; context.indexOf('node_modules') &gt;= 0;
              }
          }),
          new ExtractTextPlugin("../css/[name].css")
      ],
  
      resolve: {
          modules: [
              path.resolve('./'),
              path.resolve('./node_modules'),
          ],
          extensions: ['.js', '.json']
      }
  
  };
  
  module.exports = config;
  </code></pre>