Let's add a source map to our Webpack:

1. Create the webpack/configuration/devtool.js file:

  const isProduction = process.env.NODE_ENV === 'production';

  export default !isProduction ? 'cheap-module-source-map' : 'eval';

2. Split the bundles (using the new "optimization" Webpack node): one for our /node_modules/ which will be the biggest one, and one for our React Application. You need to create the optimization.js file and add this code:

  export default {
    splitChunks: {
      cacheGroups: {
        default: false,
        commons: {
          test: /node_modules/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }

3. Remember that you need to add those new files into index.js:

  // Configuration
  import devtool from './devtool';
  import module from './module';
  import optimization from './optimization';
  import plugins from './plugins';
  import resolve from './resolve';

  export {
    devtool,
    module,
    optimization,
    plugins,
    resolve
  };

4. Add the nodes to webpack.config.babel.js:

  import {
    devtool,
    module,
    optimization,
    plugins,
    resolve
  } from './webpack/configuration';

  export default {
    devtool,
    module,
    plugins,
    optimization,
    resolve
  };