text: // development config
  const merge = require( 'webpack-merge' );
  const baseConfig = require( './common' );
  const { resolve } = require( 'path' );
  const SpeedMeasurePlugin = require( 'speed-measure-webpack-plugin' );
  const smp = new SpeedMeasurePlugin();
  const autoprefixer = require( 'autoprefixer' );
  const { appSrc } = require( './paths' );
  
  const PORT = 3434;
  
  const devConfiguration = () => ( {
    mode:    'development',
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    module: {
      rules: [
        {
          test:    /\.scss$/,
          loaders: [
            'style-loader',
            {
              loader:  'css-loader',
              options: { importLoaders: 1 },
            },
            {
              loader:  'postcss-loader',
              options: {
                ident:   'postcss',
                plugins: [
                  autoprefixer( {
                    overrideBrowserslist: ['> 1%', 'last 2 versions'],
                  } ),
                ],
              },
            },
            'sass-loader',
          ],
        },
      ],
    },
    entry: [
      resolve( appSrc, 'index.tsx' ), // the entry point of our app
    ],
    devServer: {
      hot:    true, // enable HMR on the server
      port:   PORT,
      https:  true,
      open:   false,
      quiet:  false,
      host:   '0.0.0.0',
      public: 'https://localhost:' + PORT,
      stats:  'minimal', // only outputs when errors or new compilation happen.
    },
    devtool: 'eval-source-map',
  } );
  
  module.exports = ( env ) => smp.wrap( merge( baseConfig( env ), devConfiguration() ) );
  