webpack-dev-server builds and rebuilds very slow

Question

My webpack-dev-server gets work very slow. I have the following webpack.config.js file:

'use strict';

var path = require('path');
var webpack = require('webpack');
var glob = require("glob");

module.exports = {
  entry: {
    wit:    [babel-polyfill',
        './index.js',
        './src/shared/styles.less']  
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    //publicPath: '/',
    filename: 'bundle.[name].js'        
  },  
  module: {
    rules: [
      {
        test: /(\.js[\S]{0,1})$/i,
        exclude: /node_modules/,
        loaders: ['babel-loader?presets[]=env&presets[]=react&presets[]=stage-0&presets[]=stage-2']
      },
      {
        test: /\.(htm|html|xhtml|hbs|handlebars|php|ejs)$/i,
        exclude: /node_modules/,
        loader: "file?name=[name].[ext]",
      },       
      {
        test: /\.css$/i,
        exclude: [/node_modules/],
        loader: 'style-loader!css-loader'
      },     
      {
        test: /\.less$/i,
        exclude: /node_modules/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      // this rule handles images
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
      {
        test: /\.(jpe?g|png|gif)$/i,
        exclude: /node_modules/,
        use: [
          'url-loader?limit=10000',
          'img-loader',
          'file-loader?name=[name].[ext]?[hash]'
        ]
      },
      {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: "json-loader" 
      },
      // the following 3 rules handle font extraction
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },    
      {
        test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      },
      {
        test: /\.otf(\?.*)?$/,
        use: 'file-loader?name=/fonts/[name].  [ext]&mimetype=application/font-otf'
      } 
    ]
  },
  plugins : [   
    new webpack.ProvidePlugin({
      "React": "react", 'react-dom': 'ReactDOM'
    })
  ],    
  resolve: {
     extensions: ['.js', '.es6', '.jsx', 'less','config','variables','overrides']
   },    
  performance: {
    hints: false
  },     
  watch: false,
  target: 'web',
  devServer: {
    stats: {
      colors:           true,
      chunks:           false,
      hash:           false,
      version:      false,
      timings:      false,
      assets:           false,
      reasons:      false,
      children:     false,
      source:           false,
      errors:           false,
      errorDetails: false,
      warnings:         false,
      noInfo:       true
    }
  },
  externals: [
    {pg: true}
  ],
  node: {
    fs: 'empty'
  }
};

Answer 1

I found a solution to remove the following: instead of

  entry: {
    pit:    [babel-polyfill',
        './index.js',
        './src/shared/styles.less']  
  },

you need remove heavy loaded babel-polyfill'. So you have in this part:

  entry: {
    pit:    [
        './index.js',
        './src/shared/styles.less']  
  },

and you need to remove heavy executable rule:

      {
        test: /\.(htm|html|xhtml|hbs|handlebars|php|ejs)$/i,
        exclude: /node_modules/,
        loader: "file?name=[name].[ext]",
      },

As a result you will have quite quick script for webpack-dev-server:

'use strict';

var path = require('path');
var webpack = require('webpack');
var glob = require("glob");

module.exports = {
  entry: {
    pit:    [
        './index.js',
        './src/shared/styles.less']  
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    //publicPath: '/',
    filename: 'bundle.[name].js'        
  },  
  module: {
    rules: [
      {
        test: /(\.js[\S]{0,1})$/i,
        exclude: /node_modules/,
        loaders: ['babel-loader?presets[]=env&presets[]=react&presets[]=stage-0&presets[]=stage-2']
      },       
      {
        test: /\.css$/i,
        exclude: [/node_modules/],
        loader: 'style-loader!css-loader'
      },     
      {
        test: /\.less$/i,
        exclude: /node_modules/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      // this rule handles images
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
      {
        test: /\.(jpe?g|png|gif)$/i,
        exclude: /node_modules/,
        use: [
          'url-loader?limit=10000',
          'img-loader',
          'file-loader?name=[name].[ext]?[hash]'
        ]
      },
      {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: "json-loader" 
      },
      // the following 3 rules handle font extraction
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },    
      {
        test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      },
      {
        test: /\.otf(\?.*)?$/,
        use: 'file-loader?name=/fonts/[name].  [ext]&mimetype=application/font-otf'
      } 
    ]
  },
  plugins : [   
    new webpack.ProvidePlugin({
      "React": "react", 'react-dom': 'ReactDOM'
    })
  ],    
  resolve: {
     extensions: ['.js', '.es6', '.jsx', 'less','config','variables','overrides']
   },    
  performance: {
    hints: false
  },     
  watch: false,
  target: 'web',
  devServer: {
    stats: {
      colors:           true,
      chunks:           false,
      hash:           false,
      version:      false,
      timings:      false,
      assets:           false,
      reasons:      false,
      children:     false,
      source:           false,
      errors:           false,
      errorDetails: false,
      warnings:         false,
      noInfo:       true
    }
  },
  externals: [
    {pg: true}
  ],
  node: {
    fs: 'empty'
  }
};