webpack有啥用

1，什么是webpack，它的作用：

浏览器自使用到现在经历了好几代标准，为了使得新的标准能够兼容旧的标准，webpack帮助开发者填坑。

2，解决的具体问题：

js和其他的语言不同，js想要使用另一个文件中的变量，只能将文件中的变量暴露为全局变量。（当然了，如果B文件想要调用A文件变量，a.js只要在b.js之前引入即可，就像使用jqeury.js一定要放在最前面引入。）

a.js文件：

(function(){ 

window.hi="hello";

})();

b.js文件：

console.log(hi);        //hello

以前js只能在浏览器中运行，因为浏览器中有运行js的环境V8引擎，我们电脑的操作系统上没有V8引擎无法运行，但是现在出了一个node环境，安装在我们电脑上即可运行js。但是node比浏览器好的地方 就i是，浏览器想要共享变量，只能暴露为全局变量，而node不一样，在node眼里，所有的文件都是模块，每个模块有一个入水口一个出水口，这个出水口就是将自己模块中的变量暴露出去的接口，入水口显然就是获取其他模块变量的接口。所以在node中可以使用：

出水口：a.js

function d(){

var  msg="hello";

modules.exports={msg1:msg};  对象的形式暴露出去；

}

入水口：b.js

var msg2=require("../a").msg1;     

在浏览器中正常的，B问价要调用A文件的变量，需要把A文件引入在B文件之前，但是由于NODE使用了require，可以直接寻找文件，就不需要加载A文件了。

以上都是在讲，node环境比浏览器好的地方，可是这和webpack有啥关系？别急

js代码这样写在node中是可以解析，但是在浏览器中不可以。webpack的作用就是将在node中写好的代码（后端）解析为在浏览器下（前端）可以运行的代码；

所以打包的意思就是，不用再像浏览器那样，先引入a.js再引入b.js，完事儿a.js还要暴露为全局变量。而是直接将两个js打包成为一个bundle.js，然后在网页中直接引入bundle.js就行了。

3，关于webpack的安装问题可以参考另一篇博文：https://mp.youkuaiyun.com/postedit/81022261