Разделение кода с помощью Webpack

Если у вас есть checkAuth в ./AuthenticationContainer.js, переместите его в routes.js или создайте новый файл js и укажите его в route.js. По сути, функция, которая будет запускаться на хуке onEnter, должна присутствовать до того, как потребуется компонент, использующий getComponent.

Мои маршруты.js выглядят так:

import React from 'react';
import { Route } from 'react-router';

export default (store) => {
  function requireAuth(nextState, replace) {
    if(!store.getState().auth.isAuthenticated) {
      replace({
        pathname: '/',
        state: { nextPathname: nextState.location.pathname }
      })
    }
  }

  return { childRoutes: [{
      path: '/',
      getComponents(location, callback) {
        require.ensure(['./containers/App/App.jsx'], function (require) {
            callback(null, require('./containers/App/App.jsx').default)
        })
      },
      childRoutes: [{
        path: 'about',
        onEnter: requireAuth,
        getComponents(location, callback) {
          require.ensure(['./containers/About/About.jsx'], function (require) {
              callback(null, require('./containers/About/About.jsx').default)
          })
        }
      }]
    }]
  }
};

Я не уверен, что вы можете вызвать checkAuth внутри require.ensure и остановить загрузку компонента, если он не аутентифицирован. По дизайну это плохой подход, поскольку вы загружаете компонент, а затем проверяете, аутентифицирован ли он. Это сводит на нет преимущества разделения кода.

Изменить - Добавление webpack.config.js

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

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: APP_DIR + '/index.jsx',

  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    chunkFilename: '[id].chunk.js',
  },

  devtool: 'inline-source-map',

  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: __dirname
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('shared.js')
  ]
};

module.exports = config;

Выход сборки Webpack -

webpack -d --watch

Hash: 08b101d1e95f7633adb4
Version: webpack 1.13.2
Time: 2680ms
         Asset     Size  Chunks             Chunk Names
     bundle.js  1.05 MB    0, 3  [emitted]  main
    1.chunk.js  4.15 kB    1, 3  [emitted]  
    2.chunk.js  3.19 kB    2, 3  [emitted]  
     shared.js  3.66 kB       3  [emitted]  shared.js
 bundle.js.map  1.16 MB    0, 3  [emitted]  main
1.chunk.js.map  2.32 kB    1, 3  [emitted]  
2.chunk.js.map  1.18 kB    2, 3  [emitted]  
 shared.js.map  3.67 kB       3  [emitted]  shared.js
    + 269 hidden modules