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.csdn.net/postedit/81022261