TokyoFacebookTwitterHatenaPocketwebpackを使ってアセットをバンドルすることで、HTTPリクエストの回数を削減し、ファイルサイズを縮小できます。Webサイトをもっと快適にするためのチュートリアルです。webpackが大人気です。GitHubのスター数は30,000を超え、ReactやAngularといったJavaScript界の有名プレイヤーもwebpackを歓迎しています。webpackの本質はバンドラーであり、webpackを使えばどんなリソースやアセットでもバンドルできます。大規模なプロジェクト以外でも活用できます。webpackをインストールして設定する方法を説明します。いくつかのアセットを持つシンプルな静的サイトのための圧縮バンドルをwebpackで作成します。主な理由は、サーバーへのHTTPリクエストの回数を減らすためです。Webページが大きくなると、jQuery、フォント、プラグイン、各種スタイルシート、自作のJavaScriptなどをインクルードします。アセット1つ1つのためにネットワークリクエストを出すと、リクエスト回数が膨張しWebページが重くなります。上記のアセットすべてを1つのバンドルにまとめることで、問題を解決します。webpackは、好きな方法でアセットを書くことができ、簡単な方法でコードを圧縮してサイズを削減できます。本記事ではwebpackでES6をES5にトランスパイルする方法を説明しますが、webpackなら最新の構文(ただしこの構文はまだ完全にはサポートされていません)で書いたJavaScriptをほぼすべてのブラウザーが実行可能なES5として提供できるのです。本記事でwebpackの概要と、使い方、プロジェクトに合うかを理解できます。プロジェクトで使うかはみなさん次第です。準備コンピューターにNodeとnpmをインストールします。Nodeを持っていない場合は、NodeのWebサイトからダウンロードするか、バージョンマネージャーを利用してダウンロード、インストールしてください。複数バージョンのNodeを切り替えられることや、Nodeパッケージを管理者権限でインストールしなければならない問題を引き起こす一連のパーミッションエラーが発生しないため、後者の方法がオススメです。作業にはスケルトンプロジェクトが必要です。作成したものがここにあります。各自のマシンで実行するには、GitHubのプロジェクトをクローンして依存オブジェクトをインストールしてください。SliderとLightbox2がプロジェクトのルートであるnode_modulesフォルダーにインストールされます。インストール後、ブラウザーでindex.htmlをブラウザーにアクセスしてください。次の画面が表示されるはずです。プロジェクトにwebpackを導入するwebpackをインストールします。インストールするには以下のコマンドを実行します。--save-devwebpackがインストールされ、devDependencyとしてpackage.jsonファイルに追加されます。"^3.2.0"}バンドルしたJavaScriptを格納するためのdistフォルダーを作成します。distコマンドラインでwebpackを実行して、正しくセットアップされたことを確認します。./dist/bundle.jssrc/js/main.jsの内容をdist/bundle.jsにバンドルするようwebpackに指示しています。インストールが成功していればコマンドラインに以下のアウトプットが表示されます。[built]webpackがdistフォルダーにbundle.jsファイルを作成します。任意のテキストエディターでファイルを開くと、中に一連のボイラープレートがあり、一番下にmain.jsの内容があります。セットアップを自動化するwebpackを実行する度、上記のコマンドをターミナルに入力するのは面倒です。そこで、npmスクリプトを作成して実行します。package.jsonのscriptsプロパティを変更します。./dist/bundle.js"},スクリプトから実行する場合、npmがnode_modulesフォルダーからwebpackモジュールを自動的に探し出します。webpackモジュールをフルパスで指定する必要はありません。buildを実行すると、同じことができます。webpackの設定ファイルを作成するバンドルするファイルのパスと、アウトプットファイルのパスを引数としてwebpackに渡します。これらを設定ファイル内で指定するように変更します。あとでローダーを使うときの作業が簡単になります。プロジェクトのルートにwebpack.config.jsファイルを作成します。webpack.config.js以下のコードを追加します。}}npmスクリプトを変更します。"webpack"},webpack.config.jsは、エントリポイントとバンドルのアウトプット先を設定オブジェクトのプロパティとして指定し、設定オブジェクトをエクスポートします。実行すると前と同じように動きます。バンドルをインクルードするwebpackを使ってバンドルが生成できるので、次はバンドルをインクルードします。その前に、別のエントリポイントを作ってmain.jsを読み込みます。src/jsディレクトリにファイルapp.jsを作ります。src/js/app.jsapp.jsに以下を追加します。require('./main.js');webpackの設定を変更します。buildを実行してバンドルを作り直します。前と同じように動くはずです。index.htmlを見てください。JavaScriptは多くありません。ファイルの最後にjQueryとmain.jsファイルがインクルードされています。more...リンクをクリックしたときに情報を表示する役割を担っています。index.htmlを編集してmain.jsの代わりにバンドルをインクルードします。ファイルの末尾に以下のコードがあるはずです。to:以下のコードに変更します。more...リンクが変わらずに動作することを確認してください。jQueryをバンドルするWebページが実行するHTTPリクエストの回数を減らすためjQueryをバンドルに追加します。app.jsファイルを変更します。require('jquery');require('./main.js');jQueryを読み込んでいますが、npmでインストールしたためフルパスでインクルードする必要はありません。グローバルオブジェクトであるwindowにおなじみの$エイリアスを追加することで、ほかのスクリプトからも利用できます。index.htmlからjQueryスクリプトタグを削除します。more...リンクが変わらず動作するか確認します。CSSをバンドルするindex.htmlでネットワークリクエストを発行するはCSSだけです。ページの先頭でmain.cssをインクルードし、ほかの4つのCSSファイルをインポートします。webpackの標準設定ではJavaScriptだけ扱えますが、ローダーを使えばCSSもバンドルできます。webpackのドキュメントに以下の説明があります。ローダーはモジュールのソースコードに適用される変換処理であり、ファイルをインポートするときや「ロード」するときにプリプロセシングできます。ローダーはほかのビルドツールで言う「タスク」のようなもので、フロントエンドのビルド作業を処理するための強力な手段を提供します。URLを用いたインラインイメージへ変換します。ローダーを使えばCSSファイルをJavaScriptモジュールから直接インポートできます。app.jsを変更します。require('jquery');require('./main.js');webpack.config.jsを変更し、.cssで終わるファイルを見つけたときに実行するローダーを指定します。}}css-loaderとstyle-loader2つのローダーを指定しました。css-loaderはCSSをJavaScriptモジュールに変換し、style-loaderはJavaScriptモジュールからエクスポートしたCSSをプログラム実行時に<style>タグに注入します。これらをインストールしましょう。buildでwebpackを再び実行します。アウトプットを見ると、src/css/fonts.cssでエラーが発生しています。ファイルの5行目でインクルードしたカスタムフォント(src/fonts/open-sans/OpenSans-ExtraBold.ttf)の処理をwebpackに指示していないのが理由です。ローダーをもう1つ使えば解決します。URLに変換し、バンドルに追加します。}}インストールします。--save-devこれでビルドを実行できます。CSSのインクルードを削除し、バンドルを作り直し、ページを再読み込みしてテストします。サードパーティ製ライブラリーをバンドルする次はphotos.htmlを説明します。SliderとLightbox2と、2つのライブラリーを使っているため、コード量が多めです。どちらもjQueryに依存しています。これまで学んだ手法の応用でライブラリーをバンドルできます。app.jsを変更します。require('lightbox2');require('./main.js')ドキュメントの先頭のCSSのインクルードと末尾のスクリプトのインクルードを削除します。削除後のドキュメントは以下の通りです。</body></html>Slickを初期化するコードもバンドルにインクルードできますが、この処理は当該ページでしか使わないので、ページ上に残します。webpackを実行してなにが起きるか確認します。今回はslick-theme.cssファイルに問題があるようです。slick-theme.cssがgifフォーマットの画像を参照していますが、webpackはgifの扱い方を知りません。そのため、なす術なく停止したのです。すれば良いか分かりますね。webpack.config.jsに以下を追加します。]}そのほかのファイル形式にも一致するように正規表現を変更しました。すべてSlickやLightbox2で必要なファイル形式です。webpackを再度実行し、エラーなく完了することを確認します。ページを再読み込みして、問題がないことを確認してください。最後の仕上げほぼ完成ですが、改善できる点がいくつかあります。content)は<script>タグがレンダリングをブロックする性質を利用して、<script>のインクルードをファイルの先頭に移動させて対処します。</body></html>バンドルを圧縮するフラグ(productionの略)をつけてwebpackを実行するとバンドルを圧縮できます。package.jsonを変更します。-p"},webpack.config.jsを変更します。}}index.htmlとphotos.htmlを変更します。</body></html>バンドルのサイズが480kbまで減りました。いくつかのCSS、JavaScript、その他のアセットからなるバンドルにしては重いように思えますが、222kbはフォントです。ES6をES5にトランスパイルするbabel-loaderをインストールしてwebpackを実行すると、ES6のJavaScriptファイルがES5にトランスパイルします。--save-devwebpack.config.jsを変更します。'babel-loader?presets[]=es2015'},ES6同様、JavaScriptにコンパイルされるほぼすべての言語を利用できます。最後に本記事では、webpackを使い、シンプルな静的サイトのバンドルを作る方法を説明しました。HTTPリクエストの回数が減り、Webサイトがよりサクサク動きます。webpackにバンドルを圧縮させてファイルサイズを大きく削減する方法や、babel-loaderでES6をトランスパイルする方法も説明しました。この使い方がすべての人のニーズを満たせるわけではありませんが、webpackがどういうものかと、使い方の洞察を得られたかと思います。2はもはや必須ツールだを読んでください。Hibbard太陽の光がさんさんと降り注ぐ北ドイツに住むWeb開発者です。JavaScriptやRubyのコーディングを楽しみ、しばしばSitePointのJavaScriptフォーラムに現れることもあります。コーディングをしていないときはランニングに熱中しています。