webpackでTop-Level Awaitを使用して、一番上位でもawaitを使えるようにする方法

いままで非同期処理をするときにawaitを使用したい場合、async内でしか使えませんでした。
そのため、awaitを速実行したい場合はasyncの無名関数を作ってその中で実行していました。

(async() => {
  // ここでawaitを使用する
})();

// 関数外だと、awaitは使えない

しかし、Top-Level Awaitはその名前の通り、一番上位に限りawaitが使えるようになります（関数内の場合はasyncを付けていないと実行できません）。

webpackを使った環境で、このTop-Level Awaitを有効化する必要が出てきたので、方法を備忘録として残しておきます。

webpack.config.jsへの記述

「webpack.config.js」ファイル内にTop-Level Awaitを有効化する記述を追加します。

module.exports = {
  module: {
    rules: [
      {
        // 省略
      },
    ],
  },
  experiments: {
    topLevelAwait: true,
  },
  plugins: [],
};

対象となる記述は「experiments」内に「topLevelAwait」を追加して、trueにすると有効化されます。

experiments: {
  topLevelAwait: true,
},

webpack.mix.js

Laravel Mixを使っている場合は、設定ファイルが「webpack.mix.js」になります。
その場合も同じように「experiments」内に「topLevelAwait」を追加すれば反映されます。

mix.webpackConfig({
  resolve: {
    alias: {
      '@': __dirname + '/resources/js/src'
    }
  },
  experiments: {
    topLevelAwait: true,
  },
});

有効化せずに使った場合のエラー表示

もし、Top-Level Awaitを有効化せずに使った場合は下記のようなエラーが表示されます。

Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

有効化したにもかかわらず、このエラーメッセージが表示される場合は、設定方法を間違えているので対象のファイルを確認しましょう。