(一)安装
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",也就是按需引入~