babel是谁？babel来自哪里？它凭什么本事获得了Webpack的垂青？其实答案很简单，因为它是...
一、babel：将ES6转换成ES5
1.ES6和ES5的适用性
ES6：你好，我是新来的ES6实习生，听我们webpack老板说，我得将自己做好的工作转交给您，委托您带给“浏览器”大哥？
ES5：对的，因为不是所有的“浏览器”都愿意花时间去看实习生写的东西，所以还要辛苦你把做好的工作都转给我。
【ES6也叫做‘es2015’，是比较常用的模块化规范之一，但是很多浏览器未必都兼容ES6的用法，有的项目会将开发时所写的ES6语法转换成ES5的语法，这样一来就提高了浏览器的适用性】
2.ES6转换成ES5的loader
(咚咚咚)
ES5：请进。
ES6：您好，这是我这几天写的关于babel工作报告，辛苦您帮我提交给“浏览器”老板。
ES5：好的，我会传达好你的工作的
【ES6转换成ES5需要babel-loader，和以往安装loader步骤一样，通过npm命令安装，然后在webpack.config,js文件的关键字module进行相关的配置。】
① 通过npm命令安装bable-loader：
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
--save-dev:表示开发时依赖
babel-loader@7：安装的babel-loader版本是7
babel-core：babel的核心
babel-preset：babel的配置文件，es2015就是我们所说的ES6
② 在webpack.config.js文件进行相关配置
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
}
test:使用正则表达式匹配的文件，这里主要匹配的是.js文件；
exclude:代表去除。因我们只希望将自己写的.js文件中有关ES6的模块化规范转换成ES5的，并不希望别的.js文件也转化成ES5。这里主要去除的是node_modules和bower_components两个文件夹下的.js文件。
总结综上所述：bable-loader是ES6转换成ES5的一个工具。
二、Vue的配置
1.Vue配置的原因
C城，阳光明媚，天空中不时飘来几朵小白云遮住了火球似的太阳，但总有那么几搓阳光格外调皮，躲开了小白云的遮挡，直射到XX大厦的玻璃窗，里面不时传来人们的喧闹声。
此时Webpack公司正在进行新一轮的面试，题目是：如何通过模块化让Vue实现快速转型。这也是Webpack公司面临的挑战之一。
【之前在项目中引用Vue都是直接通过.js文件书写，但是在后期的项目中，我们希望能以 .vue文件的形式书写Vue相关代码。所以我们也需要对 .vue文件使用模块化进行配置，然后通过webpack打包部署到服务器中】
2.Vue的引用方式
实习生A：那简单，通过CND，从别人那里取其精华去其糟粕。
实习生B：万一别人破产了还咋搞？所以我觉得用script会稳定些，毕竟我的地盘我做主.
实习生C：她们说的都挺好的，但是我觉得可以用npm
【Vue的引用方式有三种：① 通过第三方的CDN引入 ②官方下载后通过script引入 ③通过npm安装Vue再引入。】
① 通过第三方的CDN引入
这种方式的引入很被动，如果第三方服务器瘫痪了，自己的项目可能也没有办法正常的运行。
②官方下载后通过script引入
这是我们普遍使用的一种方式，但是通过script标签引用，是静态的引用源码的方式，并不是通过模块化来对Vue进行管理。
③通过npm安装Vue再引入
通过npm安装的Vue，会被放在node_module文件夹内部，这个时候的Vue就可以当做模块化来处理了。
3.Vue配置的步骤
HR：C，我觉得你的想法很好，能否跟我们说说你要怎么实现呢？
实习生C：Vue之所以不能实现快速转型，是因为使用的设备不够好，所以我们得从npm供应商中买入Vue所需要的设备，然后交给webpack.config.js部门进行统一的升级配置就可以了。
【Vue配置的步骤如下：① 安装Vue ②导入Vue 】
① 安装Vue
通过命令 npm install vue --save 。--save代表运行时依赖，因为Vue文件不仅仅在开发时会用法到，在运行的时候也要用到。所以参数是--save而不是--save-dev。而且Vue安装好后，会被放置到node_module文件夹下。
②导入Vue
import Vue from 'vue';
var vm = new Vue({
el:".warp",
data:{
message:"Hello,Webpack"
}
})
在安装好Vue后，要先将Vue导入到项目在中才能继续使用。和以往导入文件的方式不一样，导入Vue可以不写路径，因为会从node_module文件夹下检查Vue是否安装好。
是的，又到了小编最头痛的时刻。报错了，这个错误还得从下面的 故事说起。
4.Vue构造的版本
Vue在构造发布的时候，构造了两类的版本，一类是runtime only，一类是runtime compiler。
①runtime only：该版本的Vue，不包含编译template的代码，所以在代码中不可以有任何的template
<body>
<div class="warp">
<h1>{{message}}</h1>
</div>
<script src="../dist/bundle.js"></script>
</body>
在上面的案例中，我们将Vue中的el挂载到了div，这个时候的div会被当成Vue实例中的template。
② runtime compiler：该版本的Vue，compiler包含编译template的代码，所以在代码中可以有任何的template。
很明显，上面的错误是因为Vue的版本是runtime only，该版本是不允许有template的，所以我们只需要指定Vue的版本即可。
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
在webpack.config.js文件配置如上代码，alias表示别名，只要是以vue结尾的文件，我们都通过vue/dist/vue.esm.js 这个路径去寻找Vue的版本。如果没有给定具体的路径名，会按照默认的路径寻找Vue的版本。而在node_module文件夹下有很多很多的Vue版本，其中/vue.esm.js该版本就包含了runtime compiler
最近的日更时间越来越晚了┭┮﹏┭┮因为遇到了越来越多的bug，很多次想要放弃的时候，就告诉自己，要对自己的每一篇文章负责，所以小编一定会坚持下去的！
❤一定要加油！不要放弃！！相信自己！！！❤
