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

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

 

 

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

以上是关于webpack初步介绍的主要内容,如果未能解决你的问题,请参考以下文章

webpack的初步入门

React-webpack环境配置-初步稿子

nodejs,webpack安装以及初步运用

对Webpack的hash稳定性的初步探索-转载

webpack基本使用

27初步探索echarts源码