Thiết lập chia tách mã trong Webpack và React.js

Question

Tôi đang cố gắng thiết lập tách/chia nhỏ mã trong ứng dụng của mình - theo tuyến đường, sử dụng require.ensure. Vì vậy, đây là con đường của tôi:

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

Dưới đây là dòng có liên quan từ webpack cấu hình của tôi:

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

Khi tôi hướng đến trang ở các tuyến đường, tôi thấy trong các bản ghi rằng đoạn cần thiết không được tải về . Tuy nhiên, trang không tải.

Và tôi nhìn thấy vết đống sau trong giao diện điều khiển:

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 

Dòng nó than phiền về là thế này:

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

Dòng thứ hai ((chức năng ẩn danh) @ main.js: 44637) về bản chất là:

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

Lưu ý, nếu tôi làm console.log(require('./attendee/containers/Profile/').default), tôi sẽ có một hàm s một đầu ra, vì vậy tôi không chắc chắn lý do tại sao nó là không xác định. Và tất nhiên khi tôi làm điều đó, mã này hoạt động, nhưng không còn chunking nữa.

Vì vậy, tôi đang làm điều gì đó sai với require. Bất kỳ ý tưởng nó là gì?

BTW Tôi đang sử dụng lịch sử băm trong dự án này - đây có phải là thủ phạm không?

Cập nhật:

Cũng cố gắng bó-loader như trong this answer. Cùng một kết quả.

Answer 1

bạn sắp hoàn tất! Hãy thử điều này: bạn cần phải cụ thể các mảng của module phụ thuộc trước thời hạn trong đối số đầu tiên của require.ensure thay vì [] thiết lập một cách rõ ràng để ['attendee/containers/Profile']

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