Reactどのように基本的なWebpack、反応し、環境を設定する
備考
このビルドパイプラインは、「プロダクションレディ」とは限りませんが、探している開発環境を得るために必要なものを追加することができます。いくつかの人々が（自分自身を含めて）取るアプローチは、Yeoman.ioや他の場所の完全に構築されたパイプラインを取って、それがスタイルに合うまで望ましくないものを取り除くことです。これには何も問題はありませんが、おそらく上記の例では、反対のアプローチを選択して、裸の骨から構築することができます。
あなたが追加したいかもしれない何かは、テストフレームワークやモカやジャスミンのカルマのようなカバレッジ統計のようなものです。 ESLintを用いて糸を引っ張る。 webpack-dev-serverのホットモジュールの置き換えにより、Ctrl + S、F5の開発経験を得ることができます。また、現在のパイプラインはdevモードでしか構築されないため、プロダクションビルドタスクは良好です。
ゴッチャ！
コンテキストプロパティに注意してくださいwebpack.config.js私たちは連結ではなく、私たちのパスを定義するためにノード・パスモジュールを使用している__dirname文字列に/srcので、これは窓が前方slashsesを嫌っています 。したがって、ソリューションをよりクロスプラットフォームに適合させるには、ノードを活用して活用してください。
webpack.config.jsプロパティの説明
コンテキスト
これは相対パスを解決するためにwebpackがルートパスとして使用するファイルパスです。したがって、index.jsxではrequire('./index.html')を使用していrequire('./index.html')ドットは実際にはsrc/ディレクトリに解決されるため、このプロパティで定義されています。
エントリ
webpackが最初にソリューションのバンドルを開始する場所。このため、index.jsxではニーズとインポートのソリューションをまとめていることがわかります。
出力
ここでは、webpackがバンドルしたファイルを削除する場所を定義します。バンドルされたjavascriptとスタイルが削除されるファイルの名前も定義しました。
devServer
これらはwebpack-dev-serverに固有の設定です。 contentBaseは、サーバがどこにルートを作るべきかを定義します。ここでは、 dist/フォルダをベースとして定義しています。 portは、サーバーがホストされるポートです。 openは、webpack-dev-serverにサーバーの起動後にデフォルトブラウザを開くように指示するために使用されるものです。
モジュール>ローダー
これは、webpackが異なるファイルを見つけたときに何をするかを知るために使用するマッピングを定義します。 testプロパティは、webpackがこのモジュールを適用するかどうかを判断するために使用するregexを与えます。ほとんどの場合、ファイル拡張子にマッチします。 loaderまたはloadersは、ファイルをwebpackにロードし、そのローダーがそのファイルタイプのバンドルを処理するために使用するローダーモジュールの名前を指定します。また、javascriptにはqueryプロパティがありquery 。これは単にローダにクエリ文字列を提供するため、私たちが望むならHTMLローダでクエリプロパティを使用している可能性があります。それは物事をするための別の方法です。
