Webpack 4.0リリースにより、シンプルな設定、WebAssemblyサポート、大幅なパフォーマンス向上を実現

最も普及しているJavaScriptモジュールバンドラであるWebpackは、2月25日（日）にバージョン4.0をリリースした。このバージョンでは、プラグインシステムが完全に書き換えられており、WebAssemblyのサポート、簡易化された構成オプションなどの新しいファーストクラスのモジュールタイプが含まれている。このアップデートでは、ビルド時間について60％から98％の削減が報告され、パフォーマンスが大幅に向上した。

このリリースに含まれる主な改善点の1つは、必要な設定ファイルがシンプルになったことである。競合するモジュールバンドラparcel.jsに有利に働いていた主な根拠の1つは、必要な設定が欠けていたことであった。このリリースでは、webpackは最小限のモードベースの設定を導入し、デフォルトでは設定ファイルなしでwebpackを使用できる。Prosper Otemuyiwa氏は、Auth0ブログの投稿の意義について説明している。

これまではWebpackがアプリケーションをバンドルするためにwebpack.config.jsファイル内にエントリポイントを定義する必要がありました。しかし、Webpack 4では、エントリポイントを定義する必要はなく、./src/index.jsがデフォルトとして使用されます。

さらに、出力ファイルを定義する必要もなく、バンドルを/.dist/main.jsに出力します。

この洗練された機能の重要性は、小規模なプロジェクトをスピンアップするときに役立ちます。構成ファイルは不要です。webpackを使うだけです！

このリリースでは、主にパフォーマンス上の理由から、プラグインシステムが完全に書き換えられている。新しいシステムに関する記事では、webpackのコア開発者であるTobias Koppers氏が動機について説明した。

プラグインシステムはwebpackのコアコンポーネントです。これは、プラグインフックがかなり頻繁に呼び出されることです。フックの多くはホットパスです。

しかし、現在のバージョンのプラグインシステムは、あらゆる数のプラグインをカバーするために、あらゆる数の引数とループを想定した引数を使用して、非常に一般的な方法で書かれています。すべてのフックに同じコードが使用されます。これにより、呼び出しプラグインは多態的になり、最適化するのが難しくなります。

新しいシステムは、より明示的で、簡単に最適化できるAPIを提供し、より高いパフォーマンス、より良いプロファイリング、TypescriptやFlowなどのタイプシステムへの統合が容易になる。

4.0リリースは、プラグイン開発者がシステムを更新できるようにするため、1か月間ベータ版で利用可能であったが、すべてが更新されたわけではない。プラグインまたはローダーを更新する開発者は、プラグイン移行ガイドを参照できる。さらに、一般的なHTMLWebpackPluginを使用している開発者はパッチ版のリリースブログ投稿を確認する必要がある。そのプラグインをメンテナンスしていたコアメンバがその役割から離れており、それからは、webpackチームが互換性のあるバージョンを提供している。

このリリースでのもう1つの大きな改善点は、WebAssemblyの実験的サポートを含む複数のファーストクラスのモジュールタイプのサポートである。webpackでのWebAssemblyのサポートは、チームがMozilla Open Source Supportプログラムから助成金を授与された2017年7月以来進行中である。助成金に関するアナウンス投稿では、WebpackチームのSean Larkin氏が目標を掲げた。

これをもう一歩推し進めるために、Rust、C++、Cファイルをプロジェクトにドロップし、JavaScriptモジュールのように使用していただきたい。

このリリースでは、その目標が実現し始めた。RustローダーとC++ローダーをnpmインストールでき、それは、指定された言語の2/3に対しての一時的なサポートとなる。

新しい機能を利用したくない開発者でもwebpack 4.0へのアップデートを望むであろう。大幅なパフォーマンスの向上が見込まれるためである。非公式のツイッター調査では75％の改善が得られた。twitterユーザーのEvan Scott氏は3680ms1から9632msに74％の改善を報告し、twitterユーザーArkaitz Garro氏は42730msから15179msに65％の改善を報告した。

すべての変更に対する変更履歴は、リリースノートに記載されている。このリリースではwebpack CLIを別のwebpack-cliノードパッケージに分割するので、ビルドシステムの外部で使用する場合は新しいパッケージをインストールする必要がある。webpack 4.0を使い始める開発者は、npm i webpack webpack-cli --save-devを使用してインストールできる。