在Webpack和React.js中设置代码拆分

Question

I'm trying to set up code splitting / chunking in my app - by route, using require.ensure . So here's my route:

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

Here are relevant lines from my 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',
  }),
],

When I navigate to the page in the route, I see in the logs that the required chunk does get downloaded. The page however does not load.

And I see the following stack trace in the 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

The line it complains about is this:

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

The second line ((anonymous function) @ main.js:44637) is essentially this:

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

Note, if I do console.log(require('./attendee/containers/Profile/').default) , I get a function as an output, so I'm not sure why it is undefined. And of course when I do that the code works, but than there's no chunking any more.

So I'm doing something wrong with the require . Any idea what it is?

BTW I'm using hash history in this project - could this be the culprit?

Update:

Also tried the bundle-loader as in this answer . Same result.

Answer 1

you are almost there! Try this: you need to specific the array of module dependencies ahead of time in the first argument of require.ensure instead of [] explicitly set it to ['attendee/containers/Profile']

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