[TOC] ### 支持`let`、`const`、箭头函数等 ``` yarn add --dev @babel/core @babel/preset-env ``` 安装用于Babel的Webpack Loader [babel-loader文档](https://webpack.docschina.org/loaders/babel-loader/) ``` yarn add --dev babel-loader ``` 在`webpack.config.js`中配置`babel-loader` ``` module.exports = { module: { rules: [ ...... { test: /\.(js)$/, exclude: /node_modules/, loader: 'babel-loader' } ] } } ``` 在`package.json`的同级目录新建`.babelrc`文件 ``` { "presets": [ "@babel/preset-env" ], "plugins": [] } ``` 此时我们写的代码中的es6与语法已经被转换了，但`webpackBootstrap`中的还没有转换，需要在`webpack.config.js`中配置target为false ```js module.exports = { // ... target: false, }; ``` [target文档](https://webpack.docschina.org/configuration/target/#root) ***** ### 支持类`class` ``` yarn add --dev @babel/plugin-proposal-class-properties ``` 配置`.babelrc` ``` { "presets": [ "@babel/preset-env" ], "plugins": ["@babel/plugin-proposal-class-properties"] } ``` ### 支持`[].includes()`、`Promise`等 ``` yarn add --dev @babel/plugin-transform-runtime yarn add --dev @babel/runtime-corejs3 ``` 配置`.babelrc` ``` { "presets": [ "@babel/preset-env" ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 3 } ], "@babel/plugin-proposal-class-properties" ] } ``` ### 在`async`函数外部使用`await`字段 在`webpack.config.js`中添加 ```js module.exports = { // ... experiments: { topLevelAwait: true } }; ```