webpack 多入口打包分析

[文章最后都是老夫精挑细选的干货哦~]

1 为什么需要多入口打包？（或者说什么时候需要多入口打包？）

先从但入口打包说起，单入口也就是常见的单页面应用，就是任何用户想访问我这个网站 必须且通过这一个唯一的入口

比如我们开发了一个 外卖网站，http://www.waimai.com => 10.79.64.4：8080/index.html, 主页
有很多吃的种类，比如

东北菜 10.79.64.4：8080/dongbei/
湖南菜 10.79.64.4：8080/fulan/
广东菜 10.79.64.4：8080/guangdong/

比如你就爱吃东北菜，那么你访问网站的方式有两种

第一种直接访问 主页，然后在点击链接跳转到东北菜页面
第二种你记住了东北菜页的网站 直接访问，

此时这两种方式其实对于单页应用是没差的，服务器都是先加载主页，（也就是主页面下载到你的电脑）然后在去用ajax方式去获取东北菜（如果你 是用了异步组件的话），

此处说一下单页面打包后生成的文件正常是三个js文件( 这是在你没有使用异步组件加载的情况，也就是没有使用require.ensure)

main.js //此时三个菜系页面是一起到打包到这里的
vendor.js
commontrunk.js

（此时主页index.html script 加载的是main.js，vendor，commontrunk这三个文件）

如果你使用了异步组件，打包出来的是,比如你将三个菜系页面用异步加载
main.js
vendor.js
commontrunk.js
dongbeicai.js //东北菜
hunancai.js//湖南菜
guangdongcai.js//广东菜

（此时主页index.html script 加载的是main.js，vendor，commontrunk这三个文件）

以上是正常的单页网站的情况，东北菜湖南菜广东菜，是我们网站的三个子系统
那么如果我们的子系统过于复杂呢？
比如我们网站 分为 地球菜 和 火星菜
地球菜，有 美国菜 中国 菜，
中国菜才是东北菜 湖南菜。。

当然我想你仍然是可以把这些写成一个单页，所有子系统都用异步组件加载，这样的危害就是当每个子系统都足够复杂适合，还混合在一起写 就会更复杂和混乱

那么多页应用来了 我们的网站编程了

地球菜 10.79.64.4：8080/diqiu/index.html
火星菜 10.79.64.4：8080/huoxing/index.html

看出区别来了吗 区别就是 我们每个子系统都有了自己的入口，可以直接作为根节点存在，而不是要一直依赖于上层父页面，

好下面说一下 前端如何实现

1 修改webpack config 的 entry,改成多个，
2 修改webpack config 的 插件HtmlWebpackPlugin，有几个入口就要生成几个index.html页面

3 打包原则可以参考

4自己的疑惑

1看到别人的项目 页面所有的通过路由去访问的组件 都用的异步组件，是否有必要？是否需要区分一下 组件大小？因为多个异步组件意味着多次请求
2对于一些公共组件 如 loading ,toast 等很多页面都可能引用的到的组件最后被打包了哪里？是否会重复打包进每个组件的js bundle？还是打包进app.js bundle业务主组件，还是抽取到了公共common.js bundle

这两个疑问需要再调研一下

公共代码抽取之manifest.js 相关

参考 http://www.cnblogs.com/myqianlan/p/5626505.html
参考 http://www.jb51.net/article/110281.htm
参考 http://www.cnblogs.com/xiaojingyuan/p/6840629.html

多入口打包实践

参考 http://www.cnblogs.com/lvdabao/p/5944420.html

多入口打包用到的【node】glob模块用法

参考 http://blog.csdn.net/tangxiaolang101/article/details/53931145

总体分析

参考 http://www.cnblogs.com/libin-1/p/6938581.html
参考 https://zhuanlan.zhihu.com/p/25954788