摘要：彻底分离源文件目录和生成文件目录使用生成出来的页面可以很安心地跟打包好的其它资源放到一起，相对于另起一个目录专门存放页面文件来说，整个文件目录结构更加合理如何利用生成页面生成页面主要是通过来实现的，下面来介绍如何实现。
本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。为什么要用webpack来生成HTML页面
原文地址：https://segmentfault.com/a/1190000007126268
如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/blog/array_huang
按照我们前面的十一篇的内容来看，自己写一个HTML页面，然后在上面加载webpack打包的js或其它类型的资源，感觉不也用得好好的么？
是的没错，不用webpack用requireJs其实也可以啊，甚至于，传统那种人工管理模块依赖的做法也没有什么问题嘛。
但既然你都已经看到这一篇了，想必早已和我一样，追求着以下这几点吧：
更懒，能自动化的事情绝不做第二遍。
更放心，调通的代码比人靠谱，更不容易出错。
代码洁癖，什么东西该放哪，一点都不能含糊，混在一起我就要死了。
那么，废话不多说，下面就来说说使用webpack生成HTML页面有哪些好处吧。
对多个页面共有的部分实现复用在实际项目的开发过程中，我们会发现，虽然一个项目里会有很多个页面，但这些页面总有那么几个部分是相同或相似的，尤其是页头页尾，基本上是完全一致的。那我们要怎么处理这些共有的部分呢？
复制粘贴流不就是复制粘贴的事嘛？写好一份完整的HTML页面，做下个页面的时候，直接copy一份文件，然后直接在copy的文件上进行修改不就好了吗？
谁是这么想这么做的，放学留下来，我保证不打死你！我曾经接受过这么一套系统，顶部栏菜单想加点东西，就要每个页面都改一遍，可维护性烂到爆啊。
Iframe流Iframe流常见于管理后台类项目，可维护性OK，就是缺陷比较多，比如说：
点击某个菜单，页面是加载出来了但是浏览器地址栏上的URL没变，刷新的话又回到首页了。
搜索引擎收录完蛋，前台项目一般不能用Iframe来布局。
没有逼格，Low爆了，这是最重要的一点（大误）。
SPA流最近这几年，随着移动互联网的兴起，SPA也变得非常常见了。不过SPA的局限性也非常大，比如搜索引擎无法收录，但我个人最在意的，是它太复杂了，尤其是一些本来业务逻辑就多的系统，很容易懵圈。
后端模板渲染这倒真是一个办法，只是，需要后端的配合，利用后端代码把页面的各个部分给拼合在一起，所以这方法对前端起家的程序员还是有点门槛的。
利用前端模板引擎生成HTML页面所谓“用webpack生成HTML页面”，其实也并不是webpack起的核心作用，实际上靠的还是前端的模板引擎将页面的各个部分给拼合在一起来达到公共区域的复用。webpack更多的是组织统筹整个生成HTML页面的过程，并提供更大的控制力。最终，webpack生成的到底是完整的页面，还是供后端渲染的模板，就全看你自己把控了，非常灵活，外人甚至察觉不出来这到底是你自己写的还是代码统一生成的。
处理资源的动态路径如果你想用在文件名上加hash的方法作为缓存方案的话，那么用webpack生成HTML页面就成为你唯一的选择了，因为随着文件的变动，它的hash也会变化，那么整个文件名都会改变，你总不能在每次编译后都手动修改加载路径吧？还是放心交给webpack吧。
自动加载webpack生成的css、less如果你使用webpack来生成HTML页面，那么，你可以配置好每个页面加载的chunk（webpack打包后生成的js文件），生成出来的页面会自动用