Tukukkk

I am currently developing a ReactJS app and I use hot-reloading. Whenever i re-compile the application, it will throw me a blank page and I would need to go back to the base url for the UI to be rendered. Here is my webpack config:

'use strict';



const path = require('path');

const webpack = require('webpack');

const merge = require('webpack-merge');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const ExtractTextPlugin = require('extract-text-webpack-plugin');



const nodeEnv = process.env.NODE_ENV || 'development';



const commonConfig = {



  resolve: {

    modules: [path.resolve('./src'), 'node_modules'],

    extensions: ['.js', '.csv', '.json', '.scss', '.css', '.html']

  },





  module: {

    rules: [

      {

        test: /.js$/,

        exclude: /node_modules/,

        enforce: 'pre',

        use: [{ loader: 'eslint-loader', options: { configFile: '.eslintrc' } }]

      },

      {

        use: 'babel-loader',

        test: /.js$/,

        exclude: /node_modules/

      },

      {

        test: /.html$/,

        use: [{ loader: 'htmlhint-loader', options: { configFile: '.htmlhintrc' } }],

        exclude: /node_modules/,

        enforce: 'pre'

      },

      {

        test: /.(png|jpg|jpeg|svg|gif|svg|woff|woff2|ttf|eot)(?v=d+.d+.d+)?$/,

        use: 'file-loader'

      },

      {

        use: [{

          loader: 'html-loader'

        }],

        test: /.html$/

      }

    ]

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: JSON.stringify(nodeEnv)

       }

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor',

      minChunks: function (module) {

        if (module.resource && (/^.*.(css|less|scss)$/).test(module.resource)) {

          return false;

        }

        return module.context && module.context.indexOf('node_modules') !== -1;

      }

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      minChunks: Infinity

    }),

    new CopyWebpackPlugin([{

      from: __dirname + '/src/images',

      to: ''

    }]),

    new HtmlWebpackPlugin({

      template: 'src/index.html',

      chunksSortMode: 'dependency'

    }),

    new webpack.optimize.ModuleConcatenationPlugin()

  ]

};





const devConfig = {

  entry: {

    main: ['whatwg-fetch', 'core-js/es6', 'react-hot-loader/patch', 'index.js',

      'webpack-hot-middleware/client?reload=true']

  },



  target: 'web',



  devtool: 'inline-source-map',



  output: {

    path: path.join(__dirname, '/build'),

    filename: '[name].bundle.js',

    publicPath: '/'

  },



  module: {

    rules: [

      {

        test: /.scss/,

        include: path.resolve(__dirname, 'src/styles'),

        use: ['style-loader', 'css-loader', {loader: 'sass-loader', options: {sourceMap: true}}]

      },

      {

        test: /.css$/,

        exclude: [/node_modules/],

        use: ['style-loader', 'css-loader?modules']

      },

      {

        test: /.css$/,

        include: [/node_modules/],

        use: ['style-loader', 'css-loader']

      }

    ]

  },



  devServer: {

    contentBase: 'src',

    compress: true,

    hot: true,

    port: 3xxx,

    host: '0.0.0.0',

    disableHostCheck: true,

    historyApiFallback: {

      disableDotRule: true,

      index: 'build/index.html'

    },

    stats: 'minimal',

    overlay: true,

    proxy: {

      '/api/**': {

        target: {

          port: 8xxx

        },

        secure: false

      },

      '/actuator/**': {

        target: {

          port: 8xxx

        },

        secure: false

      },

    }

  },



  plugins: [

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(),

    new webpack.NoEmitOnErrorsPlugin()

  ]

};



const prodConfig = {

  entry: {

    main: ['whatwg-fetch', 'core-js/es6', 'index.js']

  },



  devtool: 'source-map',



  output: {

    path: path.join(__dirname, '/build'),

    filename: '[name].[hash].bundle.js',

    publicPath: '/myModule/'

  },



  module:  {

    rules: [

      {

        test: /.scss/,

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: [

            'css-loader',

            {loader: 'sass-loader', options: {sourceMap: true}}

          ]

        })

      },

      {

        test: /.css$/,

        exclude: [/node_modules/],

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: 'css-loader?modules'

        })

      },

      {

        test: /.css$/,

        include: [/node_modules/],

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: 'css-loader'

        })

      }

    ]

  },



  plugins: [

    new ExtractTextPlugin({filename: '[name].[hash].css'}),

    new webpack.NoEmitOnErrorsPlugin()

  ]

};



const drConfig = {

  entry: {

    main: ['whatwg-fetch', 'core-js/es6', 'index.js']

  },



  devtool: 'source-map',



  output: {

    path: path.join(__dirname, '/dr_build'),

    filename: '[name].[hash].bundle.js',

    publicPath: '/myModule/'

  },



  module:  {

    rules: [

      {

        test: /.scss/,

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: [

            'css-loader',

            {loader: 'sass-loader', options: {sourceMap: true}}

          ]

        })

      },

      {

        test: /.css$/,

        exclude: [/node_modules/],

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: 'css-loader?modules'

        })

      },

      {

        test: /.css$/,

        include: [/node_modules/],

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: 'css-loader'

        })

      }

    ]

  },



  plugins: [

    new ExtractTextPlugin({filename: '[name].[hash].css'}),

    new webpack.NoEmitOnErrorsPlugin()

  ]

};



let config;

switch (nodeEnv) {

  case 'production':

    console.info('NODE_ENV: production');

    config = merge(commonConfig, prodConfig);

    break;

  case 'dr':

    console.info('NODE_ENV: dr');

    config = merge(commonConfig, drConfig);

    break;

  default:

    console.info('NODE_ENV: development');

    config = merge(commonConfig, devConfig);

    break;

}



module.exports = config;

I am not sure what I am missing or what else can be added or removed from my webpack. I use React-router-v4.

Thanks