（※訳注：本翻訳記事の元記事は7/31の投稿日となっていることにご注意下さい）

webpackの特徴的な機能の1つは 「依存関係グラフ」 を使ったアセットの管理とバンドルです。

しかしながら、webpackにロードされる全てのリソースはJavaScript(css、画像、svgs、htmlなど)として扱う必要があります。このことによって、webpackにおいてはJavaScriptのみが 第一級モジュール型となっています 。これによる欠点は、CSSやHTMLなどのそれぞれのアセットを個別の実行時間で遅延読み込みができないことです。こういったことを実現したければ、これまでは（extract-text-webpack-pluginのような）ハッキングに近い解決策を作る必要がありました。

WebAssembly

webpackでは現在、より多くのモジュールのサポートに焦点を移すことを考えています。第一級モジュールとして扱いたいと考えているモジュールの一つはWebAssemblyです。MozillaによればWebAssemblyは下記のように説明されています：

… 安全で、移植でき、サイズやロード時間効率のいいバイナリコンパイラのターゲットを定義することを目的とした新興の標準で、ネイティブに近いパフォーマンスを提供するWeb用仮想CPU。

今ではWebAssembly APIを(FireFox、Chrome、Operaや それ以外 でも)使えるようになりました。しかし、発行されたモジュールの少なさから見ると、開発者にとって使ったり、コンパイルしたり、WebAssemblyモジュールを発行したりするにはハードルが高いことを意味しているのではないでしょうか。

開発者やビジネス、会社などがproduction環境に 問題なくスムーズ に導入できるものでなければ、WebAssemblyは発展することも、繁栄することも、進化することもできません。私たちはwebpackがWebAssemblyの簡単な導入を実現し、普及を促進できる道具になりうると考えました。しかし、これには作業と時間に相当かかると考えていました。

そのため、この作業を援助してもらえないか、 Mozilla Open Source Support (MOSS) のプログラムを見てみました。MozillaとMozillaのWebプラットフォームにとってもWebAssemblyはとても重要な技術なので、この助成金に申し込むことはお互いの利益になるシナリオだと思いました。

（あらゆる分野のプロジェクトをMOSSは援助してくれます。助成金の申請については、 https://www.mozilla.org/en-US/moss/ をお読みください。）

WebAssemblyとwebpack

本日（※訳注：元記事は7/31の投稿日となっています）、 WebAssemblyを第一級モジュール型として実装するプロジェクトのためにMOSSプログラムから約1400万円の助成金を受けることができたこと を発表させていただきます。この作業を進めていくことで、 全ての開発者 にとってWebAssemblyはアクセスしやすく、使いやすくなると思います。

Win-Win

この作業を進めるためには、webpackアーキテクチャの中で最も重要な部分を書き換え、抽象化し、切り離す必要があります。これをすることで、 あらゆる種類のアセット型 が持つ第一級型になりうる可能性を実現することができます。

つまり、実行時間、パーサ、依存関係分析を全てモジュールの種類ごとに 正しく 調整できるということです。これにより、 extract-text-webpack-plugin を廃止し、CSSバンドルをネイティブ機能にすることができます。CSSの遅延読み込みバンドルをネイティブにサポートすることもできます。この機能は現在のwebpackにはありません。

ビジョン

誰でも.wasmや.watをプロジェクトにドロップして、必要なファイルに import すれば、残りの作業がwebpackによって実行されるようにしたいと考えています。

webpack loadersとWebAssemblyの威力

これをさらに推し進めて、プロジェクトにRustやC++、Cファイルを持ってくるだけでJavaScriptモジュールのように扱えるようにしていきます。

ひとたび基本的な実装が完了すれば（予定しているマイルストーンの1つです）、LLVMの専門家や言語のコミュニティと協力して 生の言語ファイルを受け取り、WebAssemblyを返すような ローダを作成する作業に集中できます。

次のようなものが書けるようになるはずです。

（お使いのWebアプリケーションに生C++ファイルをインポートした場合の例です。WASMモジュールのコンパイルをサポートしてくれるローダを使えば、何でも可能になります！）

これを実現した上で、 Guy Bedford のような他のモジュールローダの作者と一緒に、共有メモリモジュールや他の方法で可能な限りのオーバーヘッドを抽象化できるよう検討していくので期待してください。仕様に基づけば、WebAssemblyモジュールのcode splitting（コード分割）やscope hoist（スコープの巻き上げ）、WASMモジュール同士の結合なども可能になると考えています。

Webpack + WebAssembly pic.twitter.com/F3GczETc11

— JF Bastien (@jfbastien) July 20, 2017

（私(Sean Larkin)がWebAssembly W3C Community GroupでWebAssembly計画をプレゼンした時の写真です。しかも、Microsoftとwebpackを代表して❤）

協力してほしいこと

この作業は、一晩で完了できるものではありません。助成金申請の際に作成したマイルストーンを記録するために GitHub上でIssue を既に作成しています。助言や支援、アイデアなどありましたら、ぜひ聞かせてください。作業を進めているので、気軽にコメントもしてください。

さらに、 Tobias が Freelance Log Book でこの作業の記録をつけてくれています。

言語作者の皆様、WebAssemblyを対象とするホストになりそうな言語はありませんか。あるようでしたら、ぜひ、直接なしはGitHubのIssueでお知らせください。WebAssemblyモジュールを生成できるwebpackローダの開発を通して、あなたの言語がWebやWebAssemblyに対してより accessible になるようにお手伝いしたいと考えています。共同制作もしたいと強く願っています。

WebAssemblyモジュール作者の皆様、作業に使えるモジュールのサンプルはありませんか。モジュールのサイズは全く問題ではありません。

（WebAssemblyにタグされた問題一覧です。これらのタスクにぜひご参加ください。特に再構築に関する素晴らしいアイデアをお持ちの方は大歓迎です。 https://github.com/webpack/webpack/issues?q=is%3Aissue+is%3Aopen+label%3A%22Web+Assembly%22 ）

まだまだ続きます

私たちが共有したいことは、この先にもたくさん控えています。今回の助成金の取得はWebAssemblyのみならず、webpackやWebのエコシステムにとっても朗報なのです。MOSSプログラムの援助に感謝しつつ、オープンソースの持続可能性へのさらなる飛躍を称賛します。

Tobias Koppers に感謝します。