JavaScriptの利用範囲が広がるのに合わせてライブラリを使ったり、ソースコードが分かれているのを統合したりする必要が出てきました。その際に使われているのがBrowserifyであったり、WebPackです。 今回はWebPackをWebブラウザ上で体感できるWebPack Playgroundを紹介します。

WebPack Playgroundの使い方

メイン画面です。コンテンツはタブに分かれています。このタブの内容を別なタブから読み込めます。

例えばfile.jsというファイルを追加して、require('./file') とすればちゃんと読み込めます。

WebPack Playgroundでは擬似的にWebPackのようにコンテンツを展開していると思われますが、プレイグラウンドとして体感するのであれば十分ではないでしょうか。任意の外部ライブラリが使える訳ではありませんが、requireの使い方を学ぶのに最適です。

WebPack PlaygroundはHTML5/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

‎webpack.github.io/playground/ webpack/playground: In-browser playground for webpack