Impostazione della suddivisione del codice in Webpack e React.js

Question

Sto provando a impostare la suddivisione del codice/chunking nella mia app, tramite route, utilizzando require.ensure. Quindi, ecco il mio percorso:

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

Qui ci sono le linee interessate dal mio 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', 
    }), 
], 

Se navigando alla pagina nel percorso, che vedo nei log che il pezzo richiesto venga scaricato . La pagina tuttavia non viene caricata.

e vedo il seguente stack trace nella console:

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 

La linea si lamenta è questo:

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

La seconda linea ((funzione anonima) @ main.js: 44637) è essenzialmente questo:

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

nota, se lo faccio console.log(require('./attendee/containers/Profile/').default), ottengo una funzione di un È un output, quindi non sono sicuro del perché non è definito. E naturalmente quando lo faccio, il codice funziona, ma non c'è più nessun problema.

Quindi sto facendo qualcosa di sbagliato con il require. qualche idea di cosa sia?

BTW Sto usando la cronologia hash in questo progetto - potrebbe essere questo il colpevole?

Aggiornamento:

provato anche il bundle-loader come in this answer. Stesso risultato

Answer 1

sei quasi arrivato! Prova questo: è necessario specifica la matrice di dipendenze dei moduli prima del tempo nel primo argomento di require.ensure invece di [] impostare in modo esplicito a ['attendee/containers/Profile']

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