前端必看!大前端的必备构建工具和由来，到处都在讲模块化开发

通过本文，可以知道流行的前端开发模式，模块化（开发）规范是什么？Webpack构建工具为什么会出现？起到什么作用？

随着Web 技术的应用越来越复杂和庞大，应用的范围也越来越广，从PC端扩展到移动端。直接编写 JavaScript、CSS、HTML在面临大型应用的时候已经力不从心，因此前端技术的新思想与框架不断涌现。

模块化开发

模块化开发目前是当下比较流行的前端开发思想。
模块化将代码分为不同的模块进行开发和维护。其发展如下：

1. 根据功能不同，把代码通过函数或者文件进行划分
2. 通过命名空间的不同来区分，例如很多插件会用到window.$来作为命名空间。
3. IIFE模式：通过闭包来达到某些变量的私有化

模块化规范

1.CommonJS 规范，以同步方式去加载模块

接口：module.exports属性

导入：require(模块)

代码必须必须通过工具转换成标准的 ES5

2.AMD 规范，以异步的方式去加载模块，require.js 是一个AMD 规范的模块加载器

接口：define('module', ['dep'], function(dep) {return exports;});

导入：require(['module'], function(module) {});

3.CMD规范

CMD模块的加载是异步的。CMD结合了CommonJS和AMD规范的特点。在 Sea.js 是CMD规范的模块加载器

接口：define();

导入：require();

4.ES6 模块化

ES6 在语言的层面上实现了模块化，是欧洲计算机制造联合会 ECMA 提出的 JavaScript 模块化规范

接口：export{};

导入：import {x,y} from ();

ES6由于浏览器中的兼容性问题，必须通过工具转换成标准的 ES5 后才能正常运行

构建工具Webpack

Webpack这类工具的使用，解决了ES6在浏览器中的兼容性问题。

构建就是把源代码转换成浏览器可执行 JavaScrip、CSS、HTML 代码，并进行优化、打包。

Webpack 通过递归的方式寻找出入口文件的所有依赖，并打包到目标文件中。 支持模块化规范 ES6、CommonJS、AMD 。