首先熟悉几个概念：CommonJs规范、AMD规范、CMD规范，CommonJs规范指使用require("文件名")来加载，使用module.exports 暴露借口，一个文件相当于一个模块，有着单独的作用域。
AMD规范使用如下方式来加载文件:
// index.js
define(["./a","./b"],function(){
function init(){
console.log(1);
}
return {
init:init
}
});
require(["./index"],function(index){ // 依赖必须一开始就写好
index.init();
}) //1
CMD 规范兼容了CommonJs 规范和AMD规范，实例如下：
define(function(require, exports, module){
var a = require("./a.js");
a.dosomething;
require("./b.js"); //依赖可以就近书写
b.dosomething;
// 通过 exports 对外提供接口
// exports.doSomething = ...
// 或者通过 module.exports 提供整个接口
module.exports = ...
});
一、简单理解打包
在项目目录下执行webpack命令，如果该目录下存在webpack.config.js则执行该文件下的配置，eg:
module.exports = {
entry: 'index.js',
output: {
filename:'index.bundle.js'
}
}
如果没有则需要手动输入webpack的配置命令，eg:
webpack index.js index.bundle.js
以上两种方式都可以将指定文件进行打包打包。
二、处理模块依赖
我们比较熟悉使用<script>的先后引用来处理模块的依赖关系，如下：
// index.html
<!DOCTYPE html>
<html>
<head>
<title>演示模块相互依赖</title>
<meta charset="utf-8" />
<script type="text/javascript" src="./a.js"></script>
<script type="text/javascript" src="./b.js"></script>
</head>
</html>
其中b.js依赖a.js,先引用a.js再引用b.js,其中a.js代码如下：
// a.js
function a(){
console.log('hello webpack');
}
b.js 代码如下：
//b.js
a();
以上例子比较好理解，接下来我们演示如何使用webpack处理以上依赖，只需将以上代码改为：
// index.html
<!DOCTYPE html>
<html>
<head>
<title>演示模块相互依赖</title>
<meta charset="utf-8" />
<script type="text/javascript" src="bundle.js"></script>
</head>
</html>
// a.js
function a(){
console.log('hello webpack');
}
module.exports = a; // CommonJs规范暴露
/*
// AMD规范暴露
define(function(){
function init(){
console.log('hello webpack');
}
return {
init: init
}
})
*/
// b.js
var a = require('./a.js'); // 使用CommonJs方式进行加载
/*
// 使用AMD方式进行加载
require(["a"],function(a){
a.init();
})
*/
a();
执行 webpack b.js bundle.js,并在index.html中引入该打包文件。
