webpack handles es6 syntax

(1) Installation

webpack uses babel-loader to process es6 syntax

npm i babel-loader @babel/core @babel/preset-env --save

@babel/core: is the core library of babel-loader

@babel/preset-env: Convert es6 syntax to es5 syntax

(2) Arrangement

{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env'] // 版本
      }
    }

Add one to the rules, if it is a js file, use babel-loader

npx webpack pack it up

You can see that the arrow function has become a normal function, but some browsers do not support Promise. At this time, you need the @babel-polyfill plugin

npm i @babel/polyfill --save

Introduce this plugin at the entry entry

import '@babel/polyfill'

At this time, if you package again, there will be a lot of "patches", and all the browsers don’t have to be patched, but the packaging is too big. For example, I use Promise for this project, and only Promise-related patches can be applied. , This time needs to be configured again

"useBuiltIns": "usage", which is to introduce on demand~