Webpack入門[サンプルプロジェクト付き]

ウェブパック です モジュールバンドラー それは複雑なJavaScriptアプリケーションの構築を容易にします。 Reactコミュニティがそれを主な構築ツールとして選んだので、それは深刻な牽引力を得ています。 Webpackは パッケージマネージャでもタスクランナーでもありません それは別の（より高度な）アプローチを使用していますが、その目的はまた 動的ビルドプロセスを設定する.

WebpackはバニラJavaScriptで動作します。あなたはそれを使用することができます アプリケーションの静的アセットをバンドルする, 画像、フォント、スタイルシート、スクリプトなどの単一ファイルへの すべての依存関係の面倒を見る.

単純なアプリやWebサイトを作成するのにWebpackは必要ありません。たとえば、JavaScriptとCSSファイルが1つだけで、画像が2、3個しかないものなどです。 複数の資産と依存関係を持つ、より複雑なアプリケーション.

Webpack対タスクランナー対Browserify

それで、Webpackはどうやって積み重ねますか 他のビルドツールと比較して Grunt、Gulp、またはBrowserifyなど?

GruntとGulpはタスクランナーです。それらの設定ファイルでは、 タスクを指定する, そしてタスクランナーはそれらを実行します。の タスクランナーのワークフロー 基本的にはこのようになります：

しかし、Webpackは モジュールバンドラー プロジェクト全体を分析する, 依存関係ツリーを設定する, そして バンドルされたJavaScriptファイルを作成します ブラウザに役立つこと.

BrowserifyはタスクランナーよりもWebpackに近いです。 ディペンデンシーグラフを作成します しかしそれだけです JavaScriptモジュール用. Webpackはさらに一歩進んで、ソースコードをバンドルするだけでなく、 他の資産も 画像、スタイルシート、フォントなど.

もっと知りたいのなら Webpackと他のビルドツールとの違い, 2つの記事をお勧めします。

1. Andrew Ray's Webpack：いつ使うのか、そしてその理由 彼自身のブログで
2. コーリーハウス BrowserifyとWebpack freeCodeCamp上（素晴らしいイラスト付き）

上の2つのイラストは、 Pro ReactハンドブックのWebpack資料, 一見の価値がある別のリソース.

Webpackの4つのコアコンセプト

Webpackは持っています と呼ばれる4つの主な設定オプション “コアコンセプト” 開発プロセスで定義する必要があります。

1. エントリ - の 出発点 ディペンデンシーグラフ（1つ以上のJavaScriptファイル）の例.
2. 出力 - 必要なファイル バンドルされる出力 （1つのJavaScriptファイル）.
3. ローダー - 資産の変換 それらをWebpackモジュールに変える 彼らができるように 依存グラフに追加. 例えば, CSSローダー CSSファイルのインポートに使用されます.
4. プラグイン - カスタムアクションと機能 バンドルに対して実行. 例えば、 国際化webpackプラグイン ローカライゼーションをバンドルに埋め込む.

ローダーはファイルごとに動作します コンパイルが行われる前に. バンドルされたコードに対してプラグインが実行されます, コンパイルプロセスの最後に.

Webpackをインストールする

に Webpackをインストールする, コマンドラインを開き、プロジェクトフォルダに移動して、次のコマンドを実行します。

 npm init 

自分で設定したくない場合は、npmにすることができます。 を埋める package.json デフォルト値のファイル 次のコマンドで：

 npm init -y 

次に、Webpackをインストールします。

 npm install webpack --save-dev 

デフォルト値を使用した場合、これは package.json ファイルは次のようになります（プロパティは異なる順序で並んでいてもかまいません）。

 "名前"： "_テスト"、 "バージョン"： "1.0.0"、 "説明"： ""、 "メイン"： "webpack.config.js"、 "依存関係"："ウェブパック"： "^ 3.6 .0 "、" devDependencies "：" webpack "：" ^ 3.6.0 "、" scripts "：" test "：" echo \ "エラー：テストが指定されていません\" && exit 1 "、"キーワード"：[]、"作者 "：" "、"ライセンス "：" ISC " 

設定ファイルを作成する

あなたが作成する必要があります webpack.config.js ファイル プロジェクトのルートフォルダに. この設定ファイルが中心的な役割を果たします。 4つのコアコンセプトを定義する （エントリポイント、出力、ローダー、プラグイン）.

の webpack.config.js ファイル 構成オブジェクトを保持します どのプロパティを指定する必要があります。この記事では、次の4つのプロパティを指定します。 4つのコアコンセプトに対応 （エントリ, 出力, モジュール, そして プラグインただし、configオブジェクトには他のプロパティもあります.

1.エントリポイントを作成します

あなたが持つことができます 1つ以上のエントリポイント. でそれらを定義する必要があります。 エントリ 財産.

次のコードスニペットを webpack.config.js ファイル。それ エントリポイントを1つ指定します：

 module.exports = entry： "./src/script.js"; 

複数のエントリポイントを指定するには 配列またはオブジェクトの構文.

プロジェクトフォルダ内, 新しいを作成します src フォルダ そして script.js その中のファイル. これはあなたになります エントリーポイント. テスト目的では、 文字列を配置する その中。私は以下のものを使用しました（ただし、もっと面白いものも使用できます）。

 "; const greeting ="こんにちは。Webpackの初心者プロジェクトです。 "; document.write（挨拶）; 

2.出力を定義します

あなたが持つことができます 出力ファイルは1つだけ. Webpackはすべてのアセットをこのファイルにまとめています。あなたが設定する必要があります 出力 次のようにプロパティを設定します。

 const path = require（ "path"）; module.exports = エントリ： "./src/script.js"、出力：ファイル名： "bundle.js"、パス：path.resolve（__ dirname、 'dist'）; 

の ファイル名 プロパティは バンドルファイルの名前, しながら パス 財産 ディレクトリの名前を指定します. 上記の例では、 /dist/bundle.js ファイル.

必須ではありませんが、 使用 path.resolve（） 方法 定義するとき パス それ自体 正確なモジュール解像度を保証 （出力の絶対パスは、さまざまな環境でさまざまな規則に従って作成され、モジュールの解決によってこの矛盾が解決されます）。使うなら path.resolve, 必要がある 要求する の パス ノードモジュール の上部に webpack.config.js ファイル.

3.ローダーを追加する

に ローダーを追加する, あなたが定義する必要があります モジュール 財産。以下に、 バベルローダー それはあなたがすることができます ECMAScript 6の機能を安全に使用する あなたのJSファイルで：

 const path = require（ "path"）; module.exports = エントリ： "./src/script.js"、出力：ファイル名： "bundle.js"、パス：path.resolve（__ dirname、 'dist'）、モジュール：rules：[test ：/\.js$/、除外：/（node_modules | bower_components）/、使用：loader： "babel-loader"、オプション：presets：["env"]]; 

設定は難しいように思えるかもしれませんが、それはただコピーペーストされています。 Babelローダーのドキュメント. ほとんどのローダーはreadmeファイルかある種のドキュメンテーションのどちらかで来るので、あなたは（ほとんど）常にそれらを正しく設定する方法を知ることができます。そして、Webpackのドキュメントにも説明するページがあります。 設定方法 module.rules.

あなたは付け加えられます 必要なだけのローダー, これが完全なリストです。あなたもする必要があることに注意してください 各ローダーをnpmでインストールする それらを機能させるために。 Babelローダーの場合、npmで必要なNodeパッケージをインストールする必要があります。

 npm install --save-dev babel-loader babel-core babel-preset-env webpack 

あなたがあなたを見ているなら package.json ファイル、そのnpmが表示されます にBabel関連の3つのパッケージを追加しました devDependencies 財産, これらはES6コンパイルの面倒を見るでしょう.

4.プラグインを追加する

に プラグインを追加する, 指定する必要があります プラグイン 財産。さらに、あなたもする必要があります 要求する プラグインを一つずつ, 外部モジュールなので.

この例では、2つのWebpackプラグインを追加します。 HTML Webpackプラグイン そしてその Webpackプラグインをプリロードする. Webpackは 素敵なプラグインエコシステム, あなたはここで完全なリストを閲覧することができます.

Nodeモジュールとしてプラグインを要求する, 2つの新しい定数を作成する： HtmlWebpackPlugin そして PreloadWebpackPlugin そして 使用 require（） 関数.

 const path = require（ "path"）; const HtmlWebpackPlugin = require（ "html-webpack-plugin"）; const PreloadWebpackPlugin = require（ "preload-webpack-plugin"）; module.exports = エントリ： "./src/script.js"、出力：ファイル名： "bundle.js"、パス：path.resolve（__ dirname、 'dist'）、モジュール：rules：[test ：/\.js$/、除外：/（node_modules | bower_components）/、使用：loader： "babel-loader"、オプション：presets：["env"]]、プラグイン：[new HtmlWebpackPlugin] （）、new PreloadWebpackPlugin（）]; 

ローダーの場合と同じように、あなたもする必要があります npmでWebpackプラグインをインストールする. 例に2つのプラグインをインストールするには、コマンドラインで次の2つのコマンドを実行します。

 npmインストールhtml-webpack-plugin --save-dev npmインストール--save-dev preload-webpack-plugin 

あなたがチェックするなら package.json 今すぐファイル、そのnpmが表示されます に2つのプラグインを追加しました devDependencies 財産.

Webpackを実行する

に 依存関係ツリーを作成する そして バンドルを出力する, コマンドラインで次のコマンドを実行します。

 ウェブパック 

それは通常 1〜2分かかります Webpackがプロジェクトをビルドします。終了すると、CLIに同様のメッセージが表示されます。

すべてうまくいったらWebpack を作成しました 遠い フォルダ プロジェクトのルートに 2つのバンドルファイルをbundle.js そして index.html） その中.

Githubレポ

プロジェクト全体をチェックアウト、ダウンロード、またはフォークしたい場合は、Githubリポジトリをご覧ください。.