I used Code Splitting for React Router to load component async, and I made it successfully. But when i opened my page in browser, i got nothing. Here're some key code snippets:
routeConfig
// When i removed the annotation below, it did render !
// import Home from './containers/Home/Home'
const routeConfig = [
{
path: '/',
component: App,
//indexRoute: {
// component: Home
//}
getIndexRoute(location, callback) {
require.ensure([], (require) => {
callback(null, require('./containers/Home/Home'))
}, 'Home');
}
}];
Home.jsx
console.log('HOME'); // It works!
class Home extends Component {
render() {
console.log('HOME COMPONENT'); // not working!
}
}
Any ideas? I'm stuck here :(
Here're my full webpack config codes:
/**
* webpack config
*/
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
vendor: [
'react',
'react-dom',
'redux',
'react-redux',
'react-router',
'redux-logger',
'redux-thunk'
],
main: [
'./html/index'
]
},
output: {
// path: path.join(__dirname, 'html/dist'),
path: './html/dist',
publicPath: '/html/dist/',
filename: '[name].js',
chunkFilename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.js|jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
plugins: ['transform-object-rest-spread'],
presets: ['react', 'es2015']
}
},
{
test: /\.less$/,
exclude: /(node_modules|bower_components)/,
loader: "style!css!less"
}
]
},
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
// 'react': 'React',
// 'react-dom': 'ReactDOM',
// 'redux': 'Redux',
// 'react-redux': 'ReactRedux',
// 'react-router': 'ReactRouter',
// 'redux-logger': 'reduxLogger',
// 'redux-thunk': 'ReduxThunk'
},
// add this handful of plugins that optimize the build
// when we're in production
plugins: process.env.NODE_ENV === 'production' ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
] : [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: 'vendor'
})
]
};
Hope this would help.
Home.js did being loaded, but the Home component seems to be uninitialized.
