webpack 学习笔记1

模块化

在了解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()
})