模块化结构
模块化结构已经成为网站开发的主流。
制作网站的主要工作，不再是自己编写各种功能，而是如何将各种不同的模块组合在一起。
浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验。
为了解决这个问题，**前端的模块管理器（package management）应运而生。**它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来所有的前端JavaScript项目，应该都会采用这种方式开发。
CommonJS
2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。这标志"Javascript模块化编程"正式诞生。
在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。
NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。
node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。
var math = require(‘math’);
然后，就可以调用模块提供的方法：
var math = require(‘math’);
math.add(2,3); // 5
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
1,require()用来引入外部模块；
2,exports对象用于导出当前模块的方法或变量，唯一的导出口；
3,module对象就代表模块本身。
下面是一个简单的示例。
var module = {
exports: {}
};
(function(module, exports) {
exports.multiply = function (n) { return n * 1000 };
}(module, module.exports))
var f = module.exports.multiply;
f(5) // 5000
上面代码向一个立即执行函数提供 module 和 exports 两个外部变量，模块就放在这个立即执行函数里面。模块的输出值放在 module.exports 之中，这样就实现了模块的加载。
AMD
基于commonJS规范的nodeJS出来以后，服务端的模块概念已经形成，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上面的代码，如果在浏览器中运行，会有一个很大的问题，你能看出来吗？
var math = require(‘math’);
math.add(2, 3);
第二行math.add(2, 3)，在第一行require(‘math’)之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。您会注意到 require 是同步的。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
require([‘math’], function (math) {
math.add(2, 3);
});
math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。
CommonJs与AMD
其实我们单比较写法，CommonJs是更为优秀的。它是一种同步的写法，对用户友好，而且代码也不会繁琐臃肿。但更重要的原因是， 随着npm成为主流的JavaScript组件发布平台，越来越多的前端项目也依赖于npm上的项目，或者自身就会发布到npm平台。 所以我们对如何可以使用npm包中的模块是我们的一大需求。所以browserify工具就出现了，它支持我们直接使用 require() 的同步语法去加载npm模块。
当然我们这里不得不说的是，ES2015（ES6）里也有了自己的模块机制，我们通过 babel （一种6to5的编译器）可以使用比较多的新特性了。 ES6是JavaScript语言的下一代标准，Babel是一个转换编译器，它能将ES6转换成可以在浏览器中运行的代码。它的写法大致如下：
import {someModule} from “someModule”;
// your codes…
export anotherModule;
webpack功能特性
browserify的出现非常棒，但webpack更胜一筹
webpack支持的功能特性：
支持CommonJs和AMD模块，意思也就是我们基本可以无痛迁移旧项目。
支持模块加载器和插件机制，可对模块灵活定制。特别是我最爱的babel-loader，有效支持ES6。
可以通过配置，打包成多个文件。有效利用浏览器的缓存功能提升性能。
将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器，可以支持sass，less等CSS预处理器。
内置有source map，即使打包在一起依旧方便调试。
什么是Webpack
Webpack 是一个当下最热门且生态完善的 Web 前端构建工具。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
Webpack 兼容CommonJS, AMD, ES6各类规范。
任何静态资源都可以视作模块，然后模块之间也可以相互依赖，通过webpack对模块进行处理后，可以打包成我们想要的静态资源。
Webpack的工作方式
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
对应各种不同文件类型的资源, Webpack 有对应的模块 loader比如vue用的是 vue-loader, style-loader、 css-loader 是处理html或者vue后缀的页面内部的css的。
WebPack与vue-cli的关系
vue-cli，其实这是一个典型的脚手架，帮助开发者建立vue.js的项目，包括了配置好的 package.json 以及写好的打包配置，vue-cli 的脚手架项目中集成了webpack ，通过设置配置文件就可以完成打包。