webpack trata da sintaxe es6

(1) Instalação

webpack usa o babel-loader para processar a sintaxe es6

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

@ babel / core: é a biblioteca central do babel-loader

@ babel / preset-env: Converta a sintaxe es6 para a sintaxe es5

(2) Arranjo

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

Adicione um às regras, se for um arquivo js, ​​use o babel-loader

npx webpack empacotar

Você pode ver que a função de seta se tornou uma função normal, mas alguns navegadores não suportam Promise. Neste momento, você precisa do plugin @ babel-polyfill

npm i @babel/polyfill --save

Apresente este plugin na entrada

import '@babel/polyfill'

Neste momento, se você empacotar novamente, haverá muitos "patches" e todos os navegadores não precisam ser corrigidos, mas o pacote é muito grande. Por exemplo, eu uso o Promise para este projeto e apenas os patches relacionados ao Promise podem ser aplicados. , Desta vez precisa ser configurado novamente

"useBuiltIns": "uso", que é introduzir sob demanda ~