We want to better tie together the dependencies (files that are related to one another).

​pathinfo​

  // ****   webpack.config.babel.js   ****

/* eslint no-console:"off" */
const {resolve} = require('path')
const webpackValidator = require('webpack-validator')
const {getIfUtils} = require('webpack-config-utils')

module.exports = env => {
  // 1. ++++ get ifNotProd
  const {ifProd, ifNotProd} = getIfUtils(env)
  const config = webpackValidator({
    context: resolve('src'),
    entry: './bootstrap.js',
    output: {
      filename: 'bundle.js',
      path: resolve('dist'),
      publicPath: '/dist/',
      // 2. ++++ pathinfo
      pathinfo: ifNotProd(),
    },
    devtool: ifProd('source-map', 'eval'),
  })
  if (env.debug) {
    console.log(config)
    debugger // eslint-disable-line
  }
  return config
}

This helps with debugging. Webpack will add a little comment to your bundle file that tells you the name of the file it's requiring. Otherwise it will be just a number that is not very human readable (it's using its own require system that relies on ids to identify modules to save space).