webpack基础篇-解析es6为es5语法
上一节中，我们看webpack核心组成部门时，以解析.vue文件为例进行的。
webpack原生支持js语法，但是es6有很多新特性，有些浏览器和webpack并不能很好的理解，这时需要借助babel来进行把es6的语法转为es5语法。
一、webpack解析es6
使用的解析组件是babel-loader，而babel呢是需要依赖babel，所以我们用的时候需要安装babel。
新版本的babel进行了更加详细的拆分，按需安装即可。
1，我们这里先本地安装babel-cli
npm install --save-dev @babel/core @babel/preset-env babel-loader
新版的babel，安装形式为@babel/core，之前的版本是babel-core，形式不同只是代表不同的版本号。
我们是用来解析es6的所有只用到core和preset-env就可以了，所以这里边我们只安装这个。
2，新建babel的配置.babelrc文件，和packjson同级
.babelrc的内容（推荐内容）想要深入了解babel的可以访问它的官网https://www.babeljs.cn/docs/usage
{
"presets": [
"@babel/preset-env"
]
"plugins": [],
}
在.babelrc文件中一般会有presets和plugins两个属性值，presets更像是功能的集合，plugins对应的是每一个功能点，之后文章会细讲这部分，或者可以直接去babel官网查看。
3，在webpack.config.js中module的rules下新增一个loader
module: {
rules: [
{ test: /\.vue$/,
loader: 'vue-loader',
},
{ test: /\.js$/,
loader: 'babel-loader',
},
]
},
test: /.js$/表示匹配到所有已js结尾的文件，都用babel这个loader。
修改后运行npm start打包，可以看到打包后的文件已经改变。
babel还有好多相关组件，以后用到什么可以在单独安装什么，比如transform-es2015-modules-commonjs，AMD和common的转化等
总结
在没有使用babel时，我们看下打包后的截图，可以看到代码里用到的es6的语法打包后依然是es6的语法
而在使用babel后可以看到的文件中es6的语法被转化成了es5的语法（下图红框里内如）
