Webpack 也可以实现懒加载入口文件，意味着应用的一部分只在需要的时候加载，一个典型的例子是用户只有访问一些应用特定的部分，典型的例子是 Twitter.com，你不会一直访问你的个人页，所以为什么要加载那部分的代码？这里有个主要的要求：

• 你有一个相对比较大的应用，可以让用户可以访问应用的不同部分。
• 你非常关注初始渲染时间

webpack.production.config.js

var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

var config = {
  entry: {
    app: path.resolve(__dirname, 'app/main.js'),
    vendors: ['react']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: [node_modules_dir],
      loader: 'babel'
    }]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
  ]
};

module.exports = config;

所以我们把应用和第三方分离是一件非常漂亮的事，你不需要在配置中设置懒加载依赖，Webpack 会自动理解他们，然后分析你的代码。所以让我们看看我们是如何加载一个 个人信息页：

main.js (使用 ES6 语法)

import React from 'react';
import Feed from './Feed.js';

class App extends React.Component {
  constructor() {
    this.state = { currentComponent: Feed };
  }
  openProfile() {
    require.ensure([], () => {
      var Profile = require('./Profile.js');
      this.setState({
        currentComponent: Profile
      });
    });
  }
  render() {
   return (
      return <div>{this.state.currentComponent()}</div>
    );
  }
}
React.render(<App/>, document.body);

这只是一个例子，你需要把这些写入到一个路由中，不过重要的事情是使用了 require.ensure。

第一个数组参数是什么？：如果你尝试去懒加载一段由另一个懒加载的代码加载的代码的话，把它作为依赖写在数组里，就把路径写进去，比如 ['./FunnyButton.js']