Question

我有一个工作的“Hello，World”项目！

webpack.config.js：

var path = require("path");
var webpack = require("webpack");

module.exports = {

    entry: {
        app: "./src/main.js",
        vendor: ["react", "react-dom", "react-router"]
    },

    output: {
        path: __dirname+"/resources",
        publicPath: "/resources/",
        filename: "bundle.js"
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "vendor.bundle.js"})
    ],

    module: {
        loaders: [
            {
                test : /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

routes.jsx：

import React from 'react';
import App from './app.jsx';
import Home from './components/home.jsx';

import {Router, Route, IndexRoute, hashHistory} from 'react-router';


const loadAsync = (promise) => (location, callback) => {
    promise
        .then(module => callback(null, module.default))
        .catch(e => console.warn('Could not load route component', e));
};

export default class Routes extends React.Component {
    render() {
        return(
            <Router history={hashHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Home}/>
                    <Route path="/hello/:foo" getComponent={loadAsync(System.import('./components/hello.jsx'))} />
                </Route>
            </Router>
        )
    }
}

userbar.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import {Link} from 'react-router';

export default class Userbar extends React.Component {
    render() {
        return (
            <nav>
                <ul>
                    <Link to="/"><li>Home</li></Link>
                    <Link to="/hello/World"><li>World</li></Link>
                    <Link to="/hello/Universe"><li>Universe</li></Link>
                </ul>
            </nav>
            );
    }
}

hello.jsx只返回：Hello, {this.props.params.foo}!

我唯一的问题是：

这些块都是由webpack正确创建的！

但是包含hello.jsx (0.bundle.js)的块会立即加载，而不是根据请求加载！

Network-Inspector（chrome）告诉我发起人是“vendor.bundle.js”！

我该如何解决？在index-load上加载所有块是没用的！

编辑1：

我自己解决了这个问题！

我实现了没有route-tags的routes.js（现在以编程方式; Example）：

import React from 'react';
import App from './app.jsx';
import Home from './components/home.jsx';

import {Router, Route, IndexRoute, hashHistory} from 'react-router';

function loadRoute(cb) {
  return (module) => cb(null, module.default);
}

const routes = {
    component: App,
    childRoutes: [
        {
            path: "/",
            component: Home
        },
        {
            path: "/hello/:foo",
            getComponent(location, cb) {
                System.import('./components/hello.jsx')
                  .then(loadRoute(cb))
                  .catch(errorLoading);
              }
        },
    ]
};

export default () => <Router history={hashHistory} routes={routes} />

Webpack供应商加载块

0 个答案: