Hunt氏がオススメしていたwebpack入門を和訳しました。意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。原文:https://github.com/petehunt/webpack-howtoWebpack入門このガイドの目的これはwebpackで物事を成し遂げるためのクックブックです。インスタグラムで実際に使用されているものをほぼ網羅した実践的な内容となっています。私からのアドバイス:まずはこれをwebpackの参考資料として手元に置いて始めてみましょう。公式ドキュメントは理解を深めるために後で参照することにしましょう。webpackを使う理由Browserifyに似た機能を持つ一方で、アプリケーションを複数のファイルに分割することもできます。SPA内で複数ページを持つような場合は、ユーザーは閲覧しているページのコードだけをダウンロードします。他のページへ遷移した場合は、共通のコードを再ダウンロードすることはありません。CSS、Sass、Less、AltJSや画像など多くのリソースのビルドやバンドルが可能であるため、多くの場合、gruntやgulpに取って代わります。他のモジュールシステム(Angular、ES6)の中にあって、AMDとCommonJSの双方をサポートしていますが、特別な理由がない限りCommonJSを使用するようにしてください。Browserifyな人々のためのwebpackこれらは同等です。}};単なるJSなので気軽に本物のコードを入れてみてください。含むディレクトリに移動して起動します。開発用に一度だけビルドします。本番用(最小化)に一度だけビルドします。開発用に継続的差分ビルド(高速!)します。ソースマップを含めます。AltJSbrowserifyのトランスフォームとRequireJSプラグインに該当するものはwebpackのloaderです。必要)をロードさせる方法を示します。さらなる依存関係のためにbabel-loaderの導入手順も参照してください。パラメータを追加しなければなりません。するためにコードを更新してください。タグをページに挿入します。webpackにこれを教えてやる必要があります。機能フラグ開発環境だけに留めておきたいコード(ログ保存など)やドッグフーディング用サーバー(従業員がテスト中の未公開機能など)がある場合、コード内で魔法のグローバル変数を参照してください。showSecretFeature();}次に、webpackにこの魔法のグローバル変数を教えてあげましょう。definePluginは生の文字列を引数に取って挿入するため、必要ならJSの文字列を使うこともできます。することでビルドできます。未使用コード除去のuglifyを実行し、このブロックに内包されるものは取り除かれるため、秘密の機能や文字列は外部に公開されません。複数のエントリポイントプロフィールページとフィードページがあるとしましょう。プロフィールを閲覧したいだけのユーザーにはフィードのコードはダウンロードさせたくありません。そこで、複数のバンドルを用意してみましょう。各ページごとに1つのメインモジュール(エントリポイントと呼ばれます)を作成します。