webpackはes6構文を処理します

（1）インストール

webpackはbabel-loaderを使用してes6構文を処理します

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

@ babel / core：babel-loaderのコアライブラリです

@ babel / prefix-env：es6構文をes5構文に変換します

（二）配置

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

ルールに1つ追加します。それがjsファイルの場合は、babel-loaderを使用します。

npxwebpackはそれを詰め込みます

矢印機能が通常の機能になっていることがわかりますが、一部のブラウザはPromiseをサポートしていません。現時点では、@ babel-polyfillプラグインが必要です。

npm i @babel/polyfill --save

エントリエントリでこのプラグインを導入します

import '@babel/polyfill'

現時点では、再度パッケージ化すると「パッチ」が多くなり、すべてのブラウザにパッチを適用する必要はありませんが、パッケージが大きすぎます。たとえば、このプロジェクトではPromiseを使用しており、Promise関連のパッチのみを適用できます。 、今回は再度設定する必要があります

「useBuiltIns」：オンデマンドで紹介する「usage」〜