webpack初步介绍

时间:2023-03-08 21:47:39

我们通过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程序!