当你的应用依赖其他库尤其是像 React JS 这种大型库的时候，你需要考虑把这些依赖分离出去，这样就能够让用户在你更新应用之后不需要再次下载第三方文件。当满足下面几个情况的时候你就需要这么做了：

• 当你的第三方的体积达到整个应用的 20% 或者更高的时候。
• 更新应用的时候只会更新很小的一部分
• 你没有那么关注初始加载时间，不过关注优化那些回访用户在你更新应用之后的体验。
• 有手机用户。

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'),
    // 当 React 作为一个 node 模块安装的时候，
    // 我们可以直接指向它，就比如 require('react')
    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;

这些配置会在 dist/ 文件夹下创建两个文件：app.js 和 vendors.js。

重要的事情！

记住要把这些文件都加入到你的 HTML 代码中，不然你会得到一个错误：Uncaught ReferenceError: webpackJsonp is not defined。