https://www.webpackjs.com/loaders/babel-loader/
https://www.babeljs.cn/

npm install babel-loader babel-core babel-preset-env webpack

一、说明
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”]
}

一、babel介绍#
①Babel 是一个 JavaScript 编译器，可以把ES6的语法转为兼容浏览器的ES5语法

②Babel中文官网：https://www.babeljs.cn/

③Babel可以单独使用，但是一般都是和webpack结合一起使用

二、webpack里使用babel#
1、babel-loader babel-core babel-preset-env （转换语法）

①安装依赖：

// 已经在项目里安装了webpack的情况下
npm install –save-dev babel-loader babel-core babel-preset-env
②配置

复制代码
// 该文件其实最终是要在node环境下执行的
const path = require(‘path’)
const htmlWebpackPlugin = require(‘html-webpack-plugin’)

// 导出一个具有特殊属性配置的对象
module.exports = {
entry:’./src/main.js’,/* 入口文件模块路径 /
output:{
path:path.join(__dirname,’./dist/’),/ 出口文件模块所属目录，必须是一个绝对路径 /
filename:’bundle.js’/ 打包的结果文件名称 */
},
devServer:{
// 配置webpack-dev-server的www目录
contentBase:’./dist’
},
plugins:[
// 该插件可以把index.html打包到bundle.js文件所属目录，跟着bundle走
// 同时也会自动在index.html中注入script引用链接，并且引用的资源名称，也取决于打包的文件名称
new htmlWebpackPlugin({
template:’./index.html’
})
],
module:{
rules:[
{
test:/.css$/,
use:[
//注意：这里的顺序很重要，不要乱了顺序
‘style-loader’,
‘css-loader’
]
},
{
test:/.(jpg|png|gif|svg)$/,
use:[
‘file-loader’
]
},
{
test:/.js$/,
exclude:/(node_modules|bower_components)/,//排除掉node_module目录
use:{
loader:’babel-loader’,
options:{
presets:[‘env’] //转码规则
}
}
}
]
}
}
复制代码
③打包

npm run build

2、babel-polyfill 来提供低版本浏览器中的不支持API

①安装依赖

npm install –save-dev babel-polyfill
②配置：这样会在打包的时候提供一个垫脚片用以兼容低版本浏览器中不支持的API（兼容低版本浏览器的一个方法）

复制代码
// 该文件其实最终是要在node环境下执行的
const path = require(‘path’)
const htmlWebpackPlugin = require(‘html-webpack-plugin’)

// 导出一个具有特殊属性配置的对象
module.exports = {
entry:[‘babel-polyfill’,’./src/main.js’],/* 入口文件模块路径 /
output:{
path:path.join(__dirname,’./dist/’),/ 出口文件模块所属目录，必须是一个绝对路径 /
filename:’bundle.js’/ 打包的结果文件名称 */
},
devServer:{
// 配置webpack-dev-server的www目录
contentBase:’./dist’
},
plugins:[
// 该插件可以把index.html打包到bundle.js文件所属目录，跟着bundle走
// 同时也会自动在index.html中注入script引用链接，并且引用的资源名称，也取决于打包的文件名称
new htmlWebpackPlugin({
template:’./index.html’
})
],
module:{
rules:[
{
test:/.css$/,
use:[
//注意：这里的顺序很重要，不要乱了顺序
‘style-loader’,
‘css-loader’
]
},
{
test:/.(jpg|png|gif|svg)$/,
use:[
‘file-loader’
]
},
{
test:/.js$/,
exclude:/(node_modules|bower_components)/,//排除掉node_module目录
use:{
loader:’babel-loader’,
options:{
presets:[‘env’] //转码规则
}
}
}
]
}
}
复制代码
③打包

npm run build

3、transform-runtime解决代码重复问题

①在打包的过程中，babel会在包里提供一些工具函数，而这些工具函数可能会重复的出现在多个模块。

②这样会导致打包的体积过大，所以babel提供了babel-transform-runtime解决这个体积过大的问题

③安装依赖

npm install babel-plugin-transform-runtime –save-dev
npm install babel-runtime –save
④配置

复制代码
// 该文件其实最终是要在node环境下执行的
const path = require(‘path’)
const htmlWebpackPlugin = require(‘html-webpack-plugin’)

// 导出一个具有特殊属性配置的对象
module.exports = {
entry:[‘babel-polyfill’,’./src/main.js’],/* 入口文件模块路径 /
output:{
path:path.join(__dirname,’./dist/’),/ 出口文件模块所属目录，必须是一个绝对路径 /
filename:’bundle.js’/ 打包的结果文件名称 */
},
devServer:{
// 配置webpack-dev-server的www目录
contentBase:’./dist’
},
plugins:[
// 该插件可以把index.html打包到bundle.js文件所属目录，跟着bundle走
// 同时也会自动在index.html中注入script引用链接，并且引用的资源名称，也取决于打包的文件名称
new htmlWebpackPlugin({
template:’./index.html’
})
],
module:{
rules:[
{
test:/.css$/,
use:[
//注意：这里的顺序很重要，不要乱了顺序
‘style-loader’,
‘css-loader’
]
},
{
test:/.(jpg|png|gif|svg)$/,
use:[
‘file-loader’
]
},
{
test:/.js$/,
exclude:/(node_modules|bower_components)/,//排除掉node_module目录
use:{
loader:’babel-loader’,
options:{
presets:[‘env’], //转码规则
plugins:[‘transform-runtime’]
}
}
}
]
}
}
复制代码
4、配置cacheDirectory可以节省webpack打包编译时间，默认把打包的结果缓存到node_modules/.cache模块下

复制代码
// 该文件其实最终是要在node环境下执行的
const path = require(‘path’)
const htmlWebpackPlugin = require(‘html-webpack-plugin’)

// 导出一个具有特殊属性配置的对象
module.exports = {
entry:[‘babel-polyfill’,’./src/main.js’],/* 入口文件模块路径 /
output:{
path:path.join(__dirname,’./dist/’),/ 出口文件模块所属目录，必须是一个绝对路径 /
filename:’bundle.js’/ 打包的结果文件名称 */
},
devServer:{
// 配置webpack-dev-server的www目录
contentBase:’./dist’
},
plugins:[
// 该插件可以把index.html打包到bundle.js文件所属目录，跟着bundle走
// 同时也会自动在index.html中注入script引用链接，并且引用的资源名称，也取决于打包的文件名称
new htmlWebpackPlugin({
template:’./index.html’
})
],
module:{
rules:[
{
test:/.css$/,
use:[
//注意：这里的顺序很重要，不要乱了顺序
‘style-loader’,
‘css-loader’
]
},
{
test:/.(jpg|png|gif|svg)$/,
use:[
‘file-loader’
]
},
{
test:/.js$/,
exclude:/(node_modules|bower_components)/,//排除掉node_module目录
use:{
loader:’babel-loader’,
options:{
cacheDriectory:true,
presets:[‘env’], //转码规则
plugins:[‘transform-runtime’]
}
}
}
]
}
}