码迷,mamicode.com
首页 > Web开发 > 详细

webpack初步介绍

时间:2017-06-17 23:23:45      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:网站程序   管理   cmd   安装   node   遍历   his   闭包   介绍   

我们通过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文件,将他们都加上“标准壳”,目的就是让浏览器认识exportsrequiremodule这三个词语。如何让浏览器认识的呢?实际上使用的是闭包的模拟。

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

 

 

webpack确实好用,可以裸跑CMD程序!

webpack初步介绍

标签:网站程序   管理   cmd   安装   node   遍历   his   闭包   介绍   

原文地址:http://www.cnblogs.com/pms01/p/7041633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!