写得真棒，
webpack2 已经有实现静态分析出没用的代码相应的功能，不过只是beta版。
rollup还是很多东西没法跟webpack比的，比如生态，比如hmr热替换等。
没法胜任项目应用层开发，用来打包js代码应该不错，vue作者就是用它来打包vuejs代码的。

babel-polyfill怎么抽出来的呢，如果我不把babel-polyfill打包进去，打包的后的页面会报错

直接不要在代码中require('babel-polyfill')，然后在html文件中直接引用polyfill（注意，polyfill必须在你写的js前引用） 。至于为什么可以这样做，你可以看看官网的说明。https://babeljs.io/docs/usage/polyfill/ @beiciye

朋友你好，我使用

  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }

的方式将 react 包 排除，但是只能在页面使用 react 与 react-dom 的文件包，无法使用 react-with-addons 包。提示 Uncaught ReferenceError: ReactDOM is not defined。
如果朋友你有什么解决方案，还望不吝赐教，十分感谢。
我的 webpack 配置：https://github.com/codelegant/react-action/blob/master/webpack.deploy.config.js

@codelegant “ReactDOM is not defined"这个错误是哪一行代码报的错，截图我看看。

@codelegant 还有你在html引用了那些react相关的js文件？我看你的邮件你是只引用了react-with-addon.js？

错误截图：

页面上只引用了 react-with-addon

webpack配置
编译后的脚本文件
页面文件

@codelegant 你这样只引用react-with-addon.js是不对了。因为react从版本v15开始，就把react-dom相关的部分抽离出核心，放在react-dom上面了，具体的你可以参考react在github上的release note，或者这里。
所以，你需要在html中单独引用React-DOM.js

另外，第97行代码的意思其实是将你引入的React-DOM.js重新包裹输出到webpack自己的模块系统中，模块的id为3。

倘若我使用了 react-addons-css-transition-group react-addons-update等组件，分离之后，页面上该引用何种脚本才能便其工作正常？

@codelegant react-with-addons.js里面已经包含许多react-addon(插件），所以你只要引用react-with-addon.js就可以使用这些插件了。包含的插件列表可以参考这里。 https://facebook.github.io/react/docs/addons.html

那意思是要一个使用了 add-ons 插件的 react 应用，需要在页面中引入 react react-dom react-with-addons 三个包？

@codelegant 不是! 只需要引react-dom和react-with-addons，不需要再引react，因为react-with-addons就是带插件版本的react，react.js是不带插件版本的react.

多谢，我还以为 react-with-addons 是包括 react-dom 的，受教了。

再请教一个问题，我使用 ES6 的方式引入插件：

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

webpack 中该如何配置才能使用打包后的文件能够在页面上使用 react-with-addons ？我的配置：

  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-addons-css-transition-group':'ReactCSSTransitionGroup'
}

然后页面出错：Uncaught ReferenceError: ReactCSSTransitionGroup is not defined

@codelegant 你这样写是有问题的，如果你直接require（你import也一个样）react-addons-css-transition-group，由于react-addons-css-transition-group会重新require react lib文件夹下的很多东西，所以你这样做是没法将react分离的。正确的做法上面已经提到了，你在引入了react-with-addons.js之后。

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

这样就可以拿到ReactCSSTransitionGroup了。
并不需要在webpack里面额外配置什么。

使用 var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;这种方法的确可以引用外部文件，但如果使用 web-dev-server ，HMR ，react-hot-loader 进行开发调试，外引文件是无法热插拔的。必须使用 npm 包的方式，但写法就得修改成 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'，其中是否有我未知道的方式？可否两者统一？

@codelegant 我并不使用HMR，因为我对这个东西还没完全理解。我是采用结合webpack自带的watch和browsersync来实现热加载的功能的。另外，即便你适用web-dev-server，HMR这些东西，我并不认为你就能适用 'import ReactCSSTransitionGroup from 'react-addons-css-transition-group'写法。因为你在项目开发过程中，React.addon.js本身是不会发生改变的，自然无需watch它。

刚才试验，用 react 外引的方式 HMR 工作正常，只不过 react-hot-loader 没法用。以后坑还会很多，时不时的会叨扰兄台，还望勿怪。

@youngwind 你好，想请教下如果我使用预编译版本的react-with-addons.js文件，他的插件列表中并没有ReactInputSelection和ReactMount这两项，这该怎么处理？
如果是NPM INSTALL的话，可以直接通过require('react/lib/ReactMount')和require('react/lib/ReactInputSelection')来获得

库里面的依赖，可以标记成peerdependencies吧

贴下我的优化方式，部分polyfill和shim是为了兼容IE（这种预编译版本兼容至IE9，如果要兼容IE9以下，需要自行编译）,如果不需要的就不用加了

    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        'redux': 'Redux',
        'redux-thunk': 'ReduxThunk',
        'react-redux': 'ReactRedux',
        'react-addons-css-transition-group': 'React.addons.CSSTransitionGroup',
        'react-router': 'ReactRouter',
        'react-router-redux': 'ReactRouterRedux',
        'react-bootstrap': 'ReactBootstrap',
        'babel-polyfill': 'window', // polyfill 直接写 {} 也是可以的
        'es5-shim': 'window',
        'whatwg-fetch': 'fetch',
        'node-uuid': 'uuid',
        'console-polyfill': 'console'
    },

<script src="https://cdn.bootcss.com/es5-shim/4.5.9/es5-shim.min.js"></script>
<script src="https://cdn.bootcss.com/babel-polyfill/6.16.0/polyfill.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.3.2/react-with-addons.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.3.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/redux/3.6.0/redux.min.js"></script>
<script src="https://cdn.bootcss.com/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://cdn.bootcss.com/react-router/3.0.0/ReactRouter.min.js"></script>
<script src="https://cdn.bootcss.com/react-router-redux/4.0.6/ReactRouterRedux.min.js"></script>
<script src="https://cdn.bootcss.com/react-bootstrap/0.30.6/react-bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/redux-thunk/2.1.0/redux-thunk.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/1.0.0/fetch.min.js"></script>
<script src="https://cdn.bootcss.com/node-uuid/1.4.7/uuid.min.js"></script>
<script src="https://cdn.bootcss.com/console-polyfill/0.2.3/index.min.js"></script>

经过上述精简后 bundle从800多K减少到160多K

如果有源码级调试或者其他需求，可以写两个webpack配置，调试构建使用不带externals，生产构建使用externals

antd库怎么抽出来呢? 我的项目里面用了antd库, 我单独引用antd.js, 用externals 配置了antd, 打包完发现不能运行

good！bundle小了1M，多谢！

尝试了 externals，虽然大小变小了，构建速度变快了，但是手机加载变得极慢（特别是用了 antd、recharts 的 CDN）。还是要按需加载，减少手机解析 js 的时间（缓存变的不重要了）。

想问下，这样子的话，如何使用import React from 'react'

externals: {
       'react': 'React',
       'react-dom': 'ReactDOM'
  }

想问下，这样子的话，如何使用import React from 'react'

externals: {
       'react': 'React',
       'react-dom': 'ReactDOM'
  }

要把script标签引入的React的js放在bundle之前引入，否则就会出现未定义\

请问一下，nuxt框架上的webpack优化 使用cdn方式有研究过吗？