webpack 将ES6转为ES5

一、为什么要把ES6转为ES5

      首先我们知道webpack打包好的文件是放到 /dist/bundle.js里面的，如果仔细阅读bundle.js，会发现当中的大部分语法都是ES6，这样就产生了一个问题，许多不支持ES6语法的浏览器是无法解析我们打包好的bundle.js。因此我们需要做的是，在打包文件的时候，如果有ES6的语法，统一打包成ES5, 这样就能确保在最终输出的bundle.js中的语法是ES5的，从而让大部分的浏览器都能正常运行。

二、找到babel-loader

      1.首先是安装： npm  install  babel-loader@7  --save-dev  babel-core babel-preset-es2015。一共是安装三个东西，这里和官网给出的有点不同。babel-loader@7: 表示安装版本为7的babel-loader；balel-core: 表示安装babel-core的核心包；babel-preset-es2015表示安装babel的配置包，且是以es2015作为配置文件(这个我不太懂)。

      2. 然后是配置webpack.config.js:

      

     上面的配置重点在两个地方，一个是exclude:/(node_modules| bower_components)/ ，它的意思就是说node_modules或者bower_components文件夹中的js文件如果有ES6的语法，不要给我转为ES5。还有一个是presets: ['es2015'], 它的意思就是babel-loader的配置是根据es2015来，具体这个作用我不是很懂。

三、总结

      当做完上面两步之后，重新进行打包，就可以发现新生成的bundle.js中没有了ES6的语法了，都是ES5的