Einrichten der Codeaufteilung in Webpack und React.js

Question

Ich versuche, Code Splitting/Chunking in meiner App einzurichten - auf dem Weg mit require.ensure. Also hier ist meine Route:

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

sind hier relevante Zeilen aus meinem webpack config:

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', 
    }), 
], 

Wenn ich auf der Seite in der Route navigieren, ich in den Protokollen zu sehen, dass die erforderliche chunk heruntergeladen Bekommt . Die Seite wird jedoch nicht geladen.

Und ich sehe das folgende Stack-Trace in der Konsole:

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 

Die Linie es über beschwert, ist dies:

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

Die zweite Zeile ((anonyme Funktion) @ main.js: 44637) ist im wesentlichen dieser:

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

Hinweis, wenn ich console.log(require('./attendee/containers/Profile/').default) tun, ich eine Funktion eines bekommen s eine Ausgabe, also bin ich nicht sicher, warum es undefiniert ist. Und natürlich, wenn ich das tue, funktioniert der Code, aber dann gibt es kein Chunking mehr.

Also mache ich etwas falsch mit der require. Irgendeine Idee was es ist?

BTW Ich verwende Hash-Geschichte in diesem Projekt - könnte dies der Schuldige sein?

Update:

auch versucht, die Bündel-Lader wie in this answer. Gleiches Ergebnis.

Answer 1

Sie sind fast da! Versuchen Sie dies: Sie müssen bestimmte das Array von Modulabhängigkeiten vor der Zeit in dem ersten Argument von require.ensure statt [] es explizit auf ['attendee/containers/Profile']

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