step one:
select webpack
Step two：
npm install --save-dev babel-loader @babel/core
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }
npm install @babel/preset-env --save-dev
In order to enable the preset you have to define it in your .babelrc file, like this:
{ "presets": ["@babel/preset-env"] }
如果不想添加.babelrc文件可以在webpack.config.js中直接这样写：
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: ["@babel/preset-env"] } }
Step three：
有些低版本的浏览器，没有内置新JavaScript语法，比如说promise、map等等
我们需要借助@babel/polyfill将这些语法添加到浏览器https://babeljs.io/docs/en/babel-polyfill
npm install --save @babel/polyfill
If you are using ES6‘s import syntax in your application‘s entry point, you should instead import the polyfill at the top of the entry point to ensure the polyfills are loaded first:
import "@babel/polyfill";
如果只想将程序中使用到的新语法添加到浏览器，而没有使用到的新语法不用添加可以这么配置：
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: [["@babel/preset-env", { useBuiltIns: ‘usage‘ }]] } }
注意：@babel/polyfill还有其它额外的配置下面是示例，详情请参考： https://babeljs.io/docs/en/usage
Creating a config file named babel.config.json in the root of your project with this content:
{ "presets": [ [ "@babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1", }, "useBuiltIns": "usage", } ] ] }
原文：https://www.cnblogs.com/ladybug7/p/12365707.html