模块化
在了解webpack之前,我认为有必要先了解一下模块以及模块化的相关概念。
模块化规范 (nodejs提出的commonjs)
- 一个文件就是一个模块
- 每个模块都有单独的作用域
- 通过 module.exports 导出成员
- 通过 require 函数载入模块
commonjs 约定的是以 同步 的方式加载模块,nodejs的机制是启动时就加载模块,执行过程只是使用模块。
放在浏览器就会有问题,因为会出现大量的同步模式请求出现,所以为浏览器端设计了规范AMD(Asynchronous Module Definition)异步模块定义规范,规定每个模块都要按照如下进行定义
// 定义一个模块
define('module1',['jquery','./module2'],function($,module2) {
return {
start: function() {
$('body').animate({ margin: '200px' })
module2()
}
}
}
- 模块名 图中的
module1
- 模块的依赖项 有多个用数组
- 回调函数,函数的参数与模块的依赖项一一对应
- return 向外部导出成员
加载一个模块
// 载入一个模块
require(['module1'], function (module1) {
module1.start()
})