node项目介绍以及如何创建webpack2项目

首先先介绍下node项目的：

每个node项目的根目录中都会有一个package.json的文件，这个文件是用于描述这个node项目中模块依赖关系以及项目部署路径，关键字，作者，运行脚本等相关信息；

在Node中，模块分为两类：一类是Node提供的模块，称为核心模块；另一类是用户编写的模块，称为文件模块；

核心模块部分在Node源代码的编译过程中，编译进了二进制执行文件。在Node进程启动时，部分核心模块就被直接加载进内存中，所以这部分核心模块引入时，文件定位和编译执行这两个步骤可以省略掉，并且在路径分析中优先判断，所以它的加载速度是最快的，关于node核心模块大家可以查看nodeAPI文档；

文件模块则是在运行时动态加载，需要完整的路径分析、文件定位、编译执行过程，速度比核心模块慢。

下图是node项目中包的管理机制,对外提供一个接口，内部模块之间的依赖关系内部解决不暴露出来



关于node与浏览器以及W3C组织、CommonJS组织、ECMAScript之间的关系



node的相关概念这里只是做了简单地介绍，大家如果还想了解更多关于node的技术还是要多学习多看些资料，在理解了node的相关知识后下面我们就来手把手的创建一个使用webpack来组织的前端代码的项目

在指定位置新建一个目录作为项目目录，这里我在E:\nodeProject下面新建一个webpack2的目录作为项目名称，进入webpack2目录下的docs输入命令

npm init -y

这个命令是初始化一个node项目，同时会在webpack2的目录下生产一个package.json的文件，如果想自定义package.json文件的描述内容可以使用如下命令

npm init



初始化node项目后接下来就是安装node项目需要依赖的包，这里先安装webpack2

npm install webpack --save-dev

这个安装命令是局部安装只在本项目中可用，同时会在webpack2目录下创建一个node_modules的目录，在这个目录下会看到一个webpack目录；如果说想要在任何目录下都能使用webpack命令可以使用全局安装模式代码如下：

npm install webpack -g

这个命令安装的webpack默认会在C:\Users\Administrator\AppData\Roaming\npm\node_modules目录下找到

关于更多npm的命令使用方法请查阅相关文档

安装了webpack模块后然后在webpack2目录下新建build文件夹用于存放调试打包脚本文件，新建src目录用于存放编写的前端代码，我用的hbuilder工具进行编写的，将真个目录以项目的形式导入hbuilder进行编码，这样一个前端框架项目就搭建完成了目录结构如下图



这里额外说一下AMD，CMD等比较常用的js模块化编程的思想；

AMD是Asynchronous Module Definition的缩写，用白话文讲就是 异步模块定义，对于js开发者来说，异步是再也熟悉不过的词了，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。

AMD规范定义了一个自由变量或者说是全局变量 define 的函数。

define( id?, dependencies?, factory )

第一个参数 id为字符串类型，表示了模块标识，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在，那么模块标识必须为顶层的或者一个绝对的标识。

第二个参数，dependencies ，是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。

第三个参数，factory，是一个需要进行实例化的函数或者一个对象。

在CMD中一个文件就是一个模块，与AMD在写法上有所不同

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
// ...
})

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

从上面的代码中可以看出对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。

在使用webpack进行模块化管理时这两种方式都是适用的，不过我偏向于更简洁的书写方式如下：

//a.js 定义一个模块(同样的a模块也可以是一个对象或者一个常量)
module.exports = function(a,b){
return a+b;
}
// b.js 调用a模块同时也输出一个对象
var a = require('./a.js'); //假设a.js与b.js在同一目录下
var r = a(1,2);
module.exports = {
r:r,
func:function(m,b,c){
return a(m,b) + c;
}
};

在webpack这定义模块和使用模块更像是CMD的简写版省去了define的包装

下篇将详细介绍webpack2的相关知识！！