通过本文，可以知道流行的前端开发模式，模块化（开发）规范是什么？Webpack构建工具为什么会出现？起到什么作用？
随着Web技术的应用越来越复杂和庞大，应用的范围也越来越广，从PC端扩展到移动端。直接编写JavaScript、CSS、HTML在面临大型应用的时候已经力不从心，因此前端技术的新思想与框架不断涌现。
模块化开发
模块化开发目前是当下比较流行的前端开发思想。 模块化将代码分为不同的模块进行开发和维护。其发展如下：
根据功能不同，把代码通过函数或者文件进行划分
通过命名空间的不同来区分，例如很多插件会用到window.$来作为命名空间。
IIFE模式：通过闭包来达到某些变量的私有化
模块化规范
1.CommonJS规范，以同步方式去加载模块
接口：module.exports属性
导入：require(模块)
代码必须必须通过工具转换成标准的ES5
接口：define(module,[dep],function(dep){returnexports;});
导入：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。