webpack 处理 es6 的语法

（一）安装

webpack 使用babel-loader 来处理es6的语法

npm i babel-loader @babel/core @babel/preset-env --save

@babel/core：是 babel-loader 的核心库

@babel/preset-env：将 es6 语法转成 es5 的语法

（二）配置

{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env'] // 版本
      }
    }

在 rules 中加上一条，如果是js文件，就是用babel-loader

npx webpack 打包一下

可以看到箭头函数变成了普通函数，但是 Promise 有的浏览器也不支持，这时候需要 @babel-polyfill 这个插件

npm i @babel/polyfill --save

在 entry入口引入这个插件

import '@babel/polyfill'

这个时候再打包，就会又很多的“补丁”，把各个浏览器没有的都打到补丁里，但是这样打包太大了，比如这个项目我就用到了Promise，只打Promise相关的补丁就可以，这个时候又需要配置了

"useBuiltIns": "usage"，也就是按需引入~