webpack4中Babel配置

一、说明
webpack，默认只能处理一部分ES6新语法，一些更高级处理不了（ES2015+的语法）。
需要借助第三方loader来帮忙处理成低级点的语法，再把结果交给webpack打包编译处理。
通过Babel可以帮助处理ES6+高级语法。
二、安装

• npm install -D babel-loader，安装babel-loader。安装完成会提示需要安装对应版本的babel-core。
  

  

• 根据提示安装对应版本的babel-core。npm i @babel/core@^7.0.0 -D（7.x可以直接npm i @babel/core -D），babel 的 node API 已经被移到 babel-core。

• npm i @babel/preset-env -D，提供语法转换对应关系（转换字典）。babel有几种规则都可以实现对ES6语法的转码，官方现已建议采用babel-preset-env。

• 可能会报错：

  
  
  

  这是因为 babel 的版本冲突，babel-loader 8.x对应babel 7.x以此类推。

三、配置
1、增加匹配规则
webpack.config.js中增加匹配规则：

module.exports = {
    module:{  
        rules:[   
            {
                test:/\.js$/,   //匹配JS文件  
                use:'babel-loader',
                exclude:/node_modules/   //排除node_modules目录
            }
        ]
    }
}

需要排除node_modules目录，此目录下都是现成的包（已打包编译过），重新打包耗资源、运行项目报错。
2、Babel配置文件

• 在项目根路径下创建名为 .babelrc 的Babel配置文件（规范的JSON格式，无注释、字符串必须双引号等等），配置规则。
  plugins插件；presets预设、语法。

{
    "presets": ["@babel/env"]
}

• 也可以在package.json中配置。

"babel":{
   "presets": ["@babel/env"]
}