"^3.11.0"webpackとはWebクライアントアプリを作るためのNode.js製ビルドツール。概要webpacはエントリーファイルを持ち、最終的にJavaScriptファイルを出力する。用意されたPluginを組み合わせることで、関連するファイル(html,css等)を自動生成させることが出来る。使用するloaderを登録する。wepbackは、指定されたloaderを使って、importされたファイルをJavaScriptに変換する。index.htmlファイルを生成するプラグインや、リソースをコピーするプラグインなど様々なプラグインが用意されている。されたモジュールをJavaScriptに変換する役割を担う。問い合わせ、出力をチェーンしていく。変換対象モジュールを指定する。使用するloader。loaderが使用するoption。loaderに直接クエリ形式で指定することも出来る。pngなどのリソースがimportされた場合は、file-loaderを使って解決する(file-loaderを使うと、importの出力値として、ファイルパスに変換してくれる。optionsは、クエリ形式で指定できる}用意されているloaderwebpackで用意されているloaderはこちらで確認できる。JSX)を旧来のJavaScript(ES5)に変換する。'foo'サンプル以下のサンプルは、ES6対応のJavaScript(app.js)をwebpackでビルドして、旧来のJavaScript(ES5)を生成する。"webpack"}生成されたout/app.jsの内部を見ると、foo.jsが、ES5に変換されてapp.jsファイルにexportされている。Foo;file-loaderfile-loaderは、webpackにfileとしてオブジェクトを出力するように命令する。import結果としてファイルパスを渡す。作業ディレクトリを指定する。デフォルトはwebpack.config.contextと同一。nameの[path]に影響を与える。独自にoutputPath(コピー先)を指定する場合に使用する。nameの[path]に追加される。出力に、contextを考慮するか。importされたファイルを出力先にコピーするかどうかを指定するplaceholdernameには以下のplaceholderが用意されている。サンプルサンプルは、外部のcssを読み込み、linkタグを動的に追加するmain.jsを作成します。以下のようにdevフォルダ内でソースを管理し、ビルド結果をdist配下に出力するようにします。配下にすることで、[path]の出力から除外する。assetsディレクトリ配下にリソースをコピーするようにする。[path]にも追加される。これによってfile-loaderによるimportの出力結果は以下となる。表示結果css-loadercss-loaderは、cssファイルを解析し、JavaScriptオブジェクトに変換する。同じように扱い、それらの解決も行う。モジュールのimportと同一に扱う。同じように扱うため、webpackに登録されている他のloaderに対して解決を問い合わる。側で定義するため、ビルドして生成されたcss側で設定されているurl()の値がコピー先と異なる可能性がある。上記において、例えばwebpack.config.js側が以下だとする。'file?name=images/[name].png'}ビルド後の出力結果は以下となり、コピー先と異なってしまっている事がわかる。}解決策としては、context、outputhPath、nameの[path]を上手く使う必要があります。(サンプルを参照)サンプルサンプルは、cssファイルを読み込み、動的にHTMLにインジェクトするapp.jsを作成する。ファイル構成dev配下でソースを管理し、ビルド結果はdist配下に出力する。webpack表示結果style-loadercssをDOMに追加する。style-loader単体では、importを直接解決せず、file-loaderやcss-loaderと組み合わせて使用する。組み合わせることで、importされたcssをstyleタグに変換し、動的にHTML内に組み込ませるJavaScriptを生成する。従って先にcss-loaderによってimportが解決される必要がある。src="./out/main.js"></script></body></html>表示結果app.jsによって、styleタグが動的に埋め込まれる。組み合わせることによって、linkタグとしてcssファイルを動的に組み込むJavaScriptに変換される。webpac.donfig.jsでは、先にfile-loaderを実行するようにする。'./sample.css'上記をビルドして、index.htmlファイルに組み込む。src="./out/app.js"></script></body></html>表示結果app.jsによってlinkタグが動的に埋め込まれる表示結果inspectorプラグインwebpackにおいてプラグインは、関連するファイルを自動生成するために使用される。HtmlWebpackPluginHTMLを自動生成する。生成したJavaScriptファイルをbodyにインジェクトする。ファイルが組み込まれる。id="root"></h1></body></html>template.htmlを元に、index.htmlファイルが生成され、JavaScriptファイルも組み込まれる。src="main.js"></script></body></html>ExtractTextWebpackPlugincssファイルを自動生成する。style-loaderは、importされたcssを動的にhtmlにインジェクトするJavaScriptに変換する。このプラグインを使用すれば、静的なcssファイルとして出力してくれる。style-loaderと組み合わせて使用する。]}サンプルサンプルとして、DOMのbadyに書き込むapp.jsを作成し、htmlとcssをそれぞれプラグインを使って自動生成する。出力結果outディレクトリに以下が生成されます。style-loaderによって、app.jsが動的にstyleタグを組み込んでいないか確認するために、ためにし、生成したindex.htmlのlinkタグを削除して表示してみて下さい。CopyWebpackPluginリソースファイルのコピーfile-loaderはimportされたファイルのみ出力先にコピーされる。このプラグインを使えば、該当ディレクトリ配下にあるリソースをビルドはいかにコピーすることが出来る。}])]まとめ使用するloaderによってimport結果が異なるため、定義する順番も含めて、どういったloaderが使われているのかは注意しておく必要があります。Node.jsとReactアプリケーション開発テクニックwebpackだけでなく、npm、babel等の使い方が丁寧に解説されています。upLoginユーザーは見つかりませんでした。