webpack初步介绍

我们通过npm -g可以安装一个webpack的东西。

npm -g叫做全局安装，通常是安装CLI程序（commond line interface）。

我们只用过一次，装了cnpm。此时就能在CMD中用cnpm。

 

联网安装：

cnpm install -g webpack

web网站，pack打包。顾名思义，可以将整个网站程序打包。

默认安装的是webpack2，是2015年年底才有的。

 

 

查看版本：不报错，说明webpack安装成功。webpack本质是nodejs程序。安装到了-g的位置，appdata那里。

 

 

 

webpack让我们可以“裸跑CMD”。不需要标准壳了。

┣  webpack_modules

┃ ┣ main.js

┃ ┣ People.js

┃ ┣ yuan.js

┣  05_webpack.html

我们的程序都是裸跑的：

main.js:

var yuan = require("./yuan");

var People = require("./People");

 

var result1 = yuan.mianji(10);

var result2 = yuan.zhouchang(10);

alert(result1);

alert(result2);

 

var xiaoming = new People("小明",12,"男");

xiaoming.sayHello();

 

People.js:

function People(name,sex,age){

this.name = name;

this.sex = sex;

this.age = age;

}

People.prototype.sayHello = function(){

alert("你好，我是" + this.name);

}

 

module.exports = People;

 

 

yuan.js:

exports.mianji = function(r){

return 3.14 * r * r;

}

 

exports.zhouchang = function(r){

return 2 * 3.14 * r;

}

 

此时运行webpack命令，在项目根目录的CMD中：

webpack ./webpack_modules/main.js ./dist/all.js

黄色的参数表示入口js文件。橙色的参数表示合并打包的js文件。

 

也就是说webpack能：

① 识别CMD语法，遍历寻访我们require的每一个js文件，将他们都加上“标准壳”，目的就是让浏览器认识exports、require、module这三个词语。如何让浏览器认识的呢？实际上使用的是闭包的模拟。

② 能够将所有的js文件合并成为一个文件，此时便于管理、拷贝、发布。

 

 

webpack确实好用，可以裸跑CMD程序！