我使用Code Splitting for React Router来加载组件异步,我成功了。但是当我在浏览器中打开我的页面时,我什么也没得到。这里有一些关键代码段:
// 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');
}
}];
console.log('HOME'); // It works!
class Home extends Component {
render() {
console.log('HOME COMPONENT'); // not working!
}
}
有什么想法吗?我被困在这里:(
这里是我的完整webpack配置代码:
/**
* 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'
})
]
};
希望这会有所帮助。
Home.js确实已加载,但Home组件似乎未初始化。
答案 0 :(得分:0)