通过本文，可以知道流行的前端开发模式，模块化（开发）规范是什么？Webpack构建工具为什么会出现？起到什么作用？
随着Web 技术的应用越来越复杂和庞大，应用的范围也越来越广，从PC端扩展到移动端。直接编写 JavaScript、CSS、HTML在面临大型应用的时候已经力不从心，因此前端技术的新思想与框架不断涌现。
模块化开发
模块化开发目前是当下比较流行的前端开发思想。
模块化将代码分为不同的模块进行开发和维护。其发展如下：
- 根据功能不同，把代码通过函数或者文件进行划分
- 通过命名空间的不同来区分，例如很多插件会用到window.$来作为命名空间。
- 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 。