尝试webpack

• 引入文件的路径必须正确，比如引入样式的时候，less就是less， css 就是css，必须是正确的路径。
  还有一些application开头的文件路径，都直接用相对路径了。其实是可以配置resolve参数的。 但是。 我懒～

之前的jspm是会动态编译less成css， 所以都直接引用css就可以，但是也会造成问题， 比如中间如果编译失败，自动编译就不 work了， 还有就是如果在less里面有import， 也容易引起watch失败。

• 不需要html文件了 （直接在webpack/FILES.js里面定义）
  我们用到的html文件其实都大同小异，主要就是标题 和track的参数不一样。
  当然还有一些 在里面直接写了样式的，我直接拿出去了，有些直接在html引入库的， 我也拿出去了。 最后只需要一个大的map， 告诉webpack 哪个路径要设置什么样的title 和rack对应的参数就行了。
  对于某些特殊的库，必须用script tag的。 比如

    jsPlumb: '/node_modules/jsplumb/dist/js/jsPlumb-2.1.2-min.js',
    pace: '/js/bak/pace.1.0.2.min.js',
    introJs: '/node_modules/intro.js/intro.js',
    'render-html-to-pdf': 'https://linwalker.github.io/render-html-to-pdf/js/html2canvas.js',
    jsPDF: '/js/plugin/jsPdf.js'

还有很多库虽然是npm install的， 但是本质上就是引入一个js，污染环境才能用，比如summernote， dropzone，codemirror， 能换掉的话，还是趁早换掉把。

话说我们用了3个库来做富文本编辑， umeditor 和 summernote 还有medium-editor,
事实上只有medium-editor是真的支持npm的。另外两个本质上都是载入js文件污染环境。

还有一些是必须剪掉某些css的， 比如email模块的view.html， 不需要加载任何css。 就加了一点点小小的逻辑来对html模版做改动就可以了。

• 语法更加严格了，用到的变量必须import
  之前因为每个html都会自动加入jquery 之类第三方库的script 标签，所以在写代码的时候， 就算没有 import $ from 'jquery'， 也可以直接使用$。
  我一开始没有直接把所有直接在html的模版里面引入所有的库 （之前会默认引入jquery, jquery-ui, bootstrap, antd, react, react-dom)；
  然后就有很多问题，最大的问题就是我们用了相当多的jquery插件， 这些插件都需要先有jquery， 而import命令是不会污染全局环境的。在webpack中必须要配置了extenel ，表示明确告诉webpack， 这个import不用管。
  然而，我们真的需要那么多jquery的插件来解决问题吗？

import '../../js/pagev2/easing.js';   // 这个是动画效果吗。。。
import '../../js/pagev2/jquery.htmlClean.js';  // 这个又是用来干什么的。。
icheck  // 这个纯css就能解决的问题竟然引了一个库！！！
nouislider  // 这个可以用ant 替代了
jquery.nestable.js  // 这个可以用ant 替代？

bootstrap 除了css，我们就是用它来实现tab/tooltip/datepicker/modal, 全部都可以用ant替代。 tab甚至可以直接用css替代。（是的，我就是这么干的，想看css的同学可以参考components/toggleTab.less， 使用方法在less里）
总之我后来就直接在html里面写好

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>

改完之后还是很爽的， webpack的几大优势：

• 编译速度很快，比如我只关心pagev2的话，20多秒就能编译完。
• 实时编译代码，不用手动刷新
• 编译整个项目只需要不到5分钟 （这个有坑，后面说）
• 没有了jspm， 所有的包管理只用npm就可以

因为我改完之后要看看是不是真的改好了，所以改完之后的页面我都点开来看来看，发现了如下严重的bug

can not edit selected field : 'application/form/newForm'
can not open : 'application/report/show_customers/index',
can not open : application/wechat/template/list.html
can not find service, line No: 79 /Users/huangling/code/appui/application/common/redux-onboarding.js
can not send:   mktcmp/template/   preview wechat message, and send

然而就在我觉得好像一切都搞定了准备看看全部文件一起编译要多久的时候，悲剧发生了， 因为有130多个入口，直接out of memory了。
我发现最多一次build40个，再多就肯定out of memory了， 网上各种搜方案，发现就有一个paraller-webpack比较靠谱，原理就是一次性多开几个webpack，我把130个文件分了10批，终于可以build了。大概就是5分钟左右。（事实上如果不是同时跑，10个入口 大概也就是2分钟就能build完， 说明多线程还是很耗资源啊）

但是，如果要hot load 怎么办。。不全部编译，怎么一起监听呢。。 非常难过，至今没有想到好的解决方案。。。
好消息是，webpack也有一个watch模式，虽然不能实时更新，但是可以手动刷新。。
所以现在如果用 gulp start --watch, 还是可以跟之前一样， 改完了代码，手动刷新。不用重新编译。
所以现在的命令是：

gulp start [--watch] // 清空文件，拷贝文件， 编译文件
  其实文件不用每次都拷贝，因为assets都是一样的
gulp serve --test  // 跟之前一样

还有两个很严重的问题

• uglify plugin 有问题
  uglify plugin 0.6.4 不支持es6语法。 所以必须babel编译过了的才能压缩，
  需要使用 uglify-plugin的1.0版 本， 但npm上的版本是0.6.4。 直接npm下载github上的版本又总是不能被识别，实在是不知道怎么回事。。。
  为了用babel编译所有的文件， 在loader 里就不能加 exclude: /node_modules/，然后react-dates 就怎么都编译不过了。。不知道其他的库会不会也有类似的问题
• watch 模式刷新好慢啊！
  基本上要10秒才能刷新，不知道是不是因为入口太多导致的，没有仔细研究