webpack初步介绍
Posted 彭蒙善
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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程序！
以上是关于webpack初步介绍的主要内容，如果未能解决你的问题，请参考以下文章