一直想好好整理一下webpack，现在就整理吧。
一、webpack为什么要出现，是为了解决js的历史遗留问题
之前我就说过，js的主要特点之一就是解释性，它的源代码不需要经过编译，就可以直接在浏览器运行时被解释。
但是，浏览器在解析js的时候有一个大盲点，就是js不具有模块化。也就是说，一个文件要给另一个文件暴露出去一部分数据，或者说一个变量，那么你就只能把这个变量定义在全局作用域下。除此之外，别无他法。
假设1号文件里有个变量，叫做message，2号文件想要用这个变量，那么，1号文件里的message就必须得是全局变量了，也就是写成：
var window.message="定义在window下，成全局变量";
但是这样就带来了非常大的隐患，如果2号文件对message做了处理，用新的字符串将其覆盖掉，那么3号文件想要去拿这个变量的时候，message就不再是最开始的那个message了，她被玷污了！！啊，我的全局女神o(╥﹏╥)o
后来，node出现了。node就是用来在操作系统上运行js的。不过听上去也没什么特别的嘛，人家浏览器又不是不能运行js，but，node有一个很好的、但是浏览器没有的机制，那就是——他能把js给模块化。
现在大家往往会先把js转化为后端代码，然后再编译成前端代码。这种情况出现的原因，就是因为node。
在浏览器的模式下，一个文件想要共享一部分变量，就只能将这些变量写成全局变量。而在node下，只需要将这部分共享变量暴露出去就行了。比如下面这段代码：
var message="hello!"
var b=1; module.exports={message:message};
module.exports就是node里面的代码，将message暴露出去。在node的眼里，所有的文件，都是一个模块。而任何一个模块，都会有两个口，一个叫出口，一个叫入口。有了 出口和入口的把控，这样，就不是任何人都能随便玷污文件里面的所有变量女神了，让你碰你才能碰，不让你碰你是碰不到的。
而这里的module.exports,就是该文件（或是说模块）的出水口。只有message可以共享，而变量b就不可以共享。
想要这个message的方法就是用require关键字，文件名不用加后缀，代码如下：
var msg=require('./不加后缀文件名').message; console.log(msg);//hello！
在node环境下运行，就能看到msg的值了。但是，浏览器不知道这段代码是什么意思啊，光能node运行还不行啊，浏览器看不懂这两段代码，就会报错啊。所以，为了让浏览器看懂这些所谓的入水口、出水口、require关键词，webpack就这样金光闪闪地出现来拯救浏览器了。webpack的功能就是——动态地将这些后端代码编译成浏览器理解的代码，而这些被webpack打包编译出来的代码都被放在一个叫做 bundle.js 的文件里。
ε(┬┬﹏┬┬)3 webpack真好，浏览器不懂，他就能耐心地给他解释，有没有谁也能来出现拯救拯救技术这么菜的我啊，也能这么温柔就好了 ε(┬┬﹏┬┬)3
【webpack 入口文件名.js bundle.js】：打包入口文件,出口文件为bundle.js，文件下面就会多了一个bundle.js。
二、webpack的安装与配置
由于webpack是跑在node环境下的，所以我们首先，就得先安装node。
安装完后，可以通过以下代码查看你安装的node版本或npm版本：
【node-v】：查看node版本。
【npm-v】:查看npm版本，
只要有版本显示，就说明你安装上了node环境，而npm是node自带的，接下来就可以安装webpack了。
【npm i webpack -g】:将webpack安装在全局作用域下，g代表global。如果安装在全局作用域下，在任何文件下都可以使用webpack命令。
但是把webpck安装在全局下呢，可能会有一个不小心出现的麻烦。项目是多人共同创造的，有的人可能会用不同版本的webpack，为了让这个项目里所有人用的webpack版本一致，可以先用【npm init --y】生成一个package.json文件，在这个文件下记录webpack的版本。
【npm i webpack -D】=【npm i webpack --save-dev】:局部安装，当前的文件夹下会生成一个node_module的文件夹，同时package.json文件里会显示安装的webpack的版本。
好了，现在webpack安装上了，那么现在，在本地怎么利用webpack呢？
首先，找到刚刚生成的node_module的文件夹，然后里面有个文件夹叫做bin，也就是binary（二进制的，可执行的）的意思。打开这个叫做bin的文件夹，你会发现里面有个叫做webpack的文件。所以，使用代码如下：
【node_modules/.bin/webpack 入水口文件名.js bundle.js】:打包出来。
但是上面这条命令的路径好长啊，所以，为了简化，在package.json文件里，找到script对象，添加一条自定义命令。记得自定义命令之间都要用逗号隔开。比如：
【"pack":"node_modules/.bin/webpack 入口文件名.js bundle.js】：其中，pack叫做键名。
好了，有了这条自定义命令，就可以在终端中使用了，【npm run pack】，这样，就像开始那样，生成一个bundle.js文件了，在html页面里，只要在<script src='bundle.js' type="text/javascript">标签里引用bundle.js就行了。
但是，这条命令还能简化不？答案是，当然可以。
那就是要创建webpack.config.js的文件，但是我有点累了，先洗洗睡了，以后补全。