getComponent() 后未渲染拆分组件答案

【问题标题】：Split component wasn't rendered after getComponent()getComponent() 后未渲染拆分组件
【发布时间】：2016-10-22 16:28:46
【问题描述】：

我使用 React Router 的 Code Splitting 来异步加载组件，并且成功了。但是当我在浏览器中打开我的页面时，我什么也没有。这是一些关键代码sn-ps：

路由配置

// 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!
    }   
}

有什么想法吗？我被困在这里:(

这是我完整的 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 组件似乎未初始化。

【问题讨论】：

如何导出主页？你写default export class Home extends Component了吗？
@DamienLeroux 是的，我确实做到了。
你能显示你的其余配置吗，也许有一个设置导致 webpack 无法正确解析加载器。
@SeanLarkin 完成，看看谢谢 :)

标签： reactjs webpack react-router