「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
从模块化说起
最初，为了达到模块化的目的，会把一些重复使用的代码封装成一个 function，需要用到的时候时候去调用它，如下一段代码：
function getName(){}
function setName(){}
当我们使用的时候就需要在使用的地方引入这个函数，把这两个方法放在util.js里面，接下来我们可以在业务代码中使用这两个方法，把js文件引入到HTML中：
<body>
<script src="./utils.js"></script>
</bodey>
但是这样的场景只适合简单的业务，一旦遇到复杂的业务的时候就会出现很多问题
问题一：全局变量冲突
问题二：人工维护依赖关系
这两个问题中最常用的解决方法是
- 针对全局变量冲突，参考其他后端语言的特性，添加命名空间
- 为了实现模块化，将用一个变量存放所有模块，使用立即执行函数，加入闭包：
- 在客户端层面，一直没有一个比较好的解决方案，直到代码合并的出现。
以上三个方法虽然可以避免这两个问题但是仍然不能最终完美解决
需要手动确认依赖进行混淆合并压缩
同时对前端同学并不友好
nodejs带来的模块化规范 commonJS。
对于前端同学来说 node 有着天然的亲和力，为了解析 commonJS 以及提高开发效率，社区里各种构建工程不断涌出， 具有代表性的有 grunt、gulp、browserify，webpack，前端模块化可以更进一步，并将前端推向了工程化时代。构建工具可解决全局变量冲突以及人工维护依赖问题。
Webpack，当今最流行的模块化解决方案，随着社区及生态的发展，不仅仅是一个模块化工具，更是一个前端的构建编译工具。
但是webpack也会有一些问题
• 随着项目业务的复杂度增加，工程模块的体积也会急剧增大，构建后的模块通常要以M为单位计算；
• 代码全量构建速度过慢，即使是很小的改动，也要等待长时间才能查看到更新与编译后的结果（引入HMR热更新后有明显改进）；
• 多个项目之间共用基础资源存在重复打包，基础库代码复用率不高；
• node的单进程实现在耗cpu计算型loader中表现不佳；
优化方案
• 减少编译体积大小
• 将大型库外链
• 将库预先编译
• 使用缓存并行编译
使用hash缓存
为什么给静态资源加hash
1.避免覆盖旧文件
2.回滚方便，只需要回滚html
3.由于文件名唯一，可开启服务器永远缓存
