WebpackとReact.jsでのコード分割の設定

Question

私のアプリでコード分割/チャンクを設定するのは、require.ensureを使用しています。だからここに私のルートです：ここで

<Route path="profile" 
     getComponent={(location, cb) => 
     {require.ensure(
      [], 
      (require) => { cb(null, require('attendee/containers/Profile/').default) }, 
      'attendee')}} /> 

は私のWebPACKの設定から関連する行されています。私は、ルート内のページに移動すると、私は必要なチャンクがダウンロードさんログに

const PATHS = { 
    app: path.join(__dirname, '../src'), 
    build: path.join(__dirname, '../dist'), 
}; 

const common = { 
    entry: [ 
    PATHS.app, 
    ], 

    output: { 
    path: PATHS.build, 
    publicPath: PATHS.build + '/', 
    filename: '[name].js', 
    chunkFilename: '[name].js', 
    sourceMapFilename: '[name].js.map' 
    }, 

    target: 'web', 

devtool: 'cheap-module-eval-source-map', 
entry: [ 
    'bootstrap-loader', 
    'webpack-hot-middleware/client', 
    './src/index', 
], 
output: { 
    publicPath: '/dist/', 
}, 


plugins: [ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: '"development"', 
    }, 
    __DEVELOPMENT__: true, 
    }), 
    new ExtractTextPlugin('main.css'), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    }), 
], 

見ます。しかし、ページは読み込まれません。

そして私は、コンソールで次のスタックトレースを参照してください。

Uncaught TypeError: Cannot read property 'call' of undefined 
t      @ main.js:10 
(anonymous function) @ main.js:44637 
window.webpackJsonp @ main.js:40 
(anonymous function) @ attendee.js:1 

それは文句を言う行はこれです：

return e[n].call(o.exports, o, o.exports, t) 

二行目（（無名関数）main.js @：私はconsole.log(require('./attendee/containers/Profile/').default)をすれば、私は関数Aを取得し、

require('attendee/containers/Profile/').default 

注：44637）は、本質的にこれです私はなぜそれが未定義であるかわかりません。もちろん、コードを実行すると、コードは機能しますが、それ以上のチャンクはありません。

だから私はrequireで何か問題があります。どんなアイデアなのか？

私はこのプロジェクトでハッシュ履歴を使用しています - これが原因でしょうか？

更新：

もthis answerのように、バンドル・ローダーを試してみました。同じ結果。

Answer 1

あなたはほぼそこにいます！これを試してください：あなたは明示的にタグの提案のための['attendee/containers/Profile']

(location, cb) => { 
    require.ensure(['attendee/containers/Profile'], (require) => { 
    cb(null, require('attendee/containers/Profile').default) 
    }) 
}