打包工具的演变进程

打包工具的演变进程

1. 刚开始，前端业务很简单，只是文字和图片的简单展示；前端代码html+css+js写在一个文件中，简单粗暴，也能解决业务需求
2. 后来，前端业务变得复杂，我们就想着把html+css+js三大件分开成3个文件，并进行引入，如<script src="./index.js"></script>
3. 随着业务进一步复杂，index.js里面的代码已经非常庞大，维护成本陡增，我们不得不相办法将index.js拆分成header.js/body.js./footer.js(对于样式index.css情况也一样), 于是模块化的概念就产生了

// index.html     
<script src="./header.js"></script>
<script src="./body.js"></script>
<script src="./footer.js"></script>
<script src="./index.js"></script>
......

// index.js
header();
body();
footer();

4. 这样做就可以解决代码维护难的问题，不同模块的功能放入到不同的脚本文件中了
5. 但是这样做又产生了其他的问题:
   • js文件结构不够清晰，在index.js里面无法知道header,body,footer来自哪里
   • index.html引入了多个js文件，影响页面速度
   • 如果把footer.js和index.js颠倒引入顺序，会出现报错，且不容易排查
6. 于是有人就想， 能不能在index.js里面用ES Module的方法来写;

// index.js
// ES Module写法
import header from './header.js';
import body from './body.js';
import footer from './footer.js';
header(); body(); footer();

// index.html
<script src="./index.js"></script>

7. 这样就解决了【5】当中的三个问题(1. 结构清晰，在index.js里能清晰的看到各个模块来自哪里；2. 页面上只需要引入main.js一个脚本文件即可；3. header/body/footer三个模块颠倒顺序也不会报错了)但是浏览器又不认识【ES Module】，于是webpack就应运而生了。

【ps】— 模块化相关：

1. 随着模块化概念的逐渐发展，编程社区提出了多种模块规范；服务端选择了CommonJS规范，客服端选择了AMD规范
2. 但是这又存在一个问题，对于javascript而言，却出现了两种模块化规范，就好比【普通话没有出现之前，一个中国人，你让我四川讲四川话，在东北讲东北话】；所以ECMA委员会就推出了【ES Modules规范】，类似于模块化领域的【普通话】 题外话，现在node.js使用CommonJS规范还是比较多，不过已经在向着ES Modules靠拢了