webpack
JetBrains Rider は webpack モジュールバンドラーと統合できます。 このサポートにより、JavaScript ファイルのコーディング支援が webpack モジュール解決と リゾルブエイリアスを考慮して向上します。
異なる webpack 構成を持つ複数のモジュールで構成されるプロジェクトでは、JetBrains Rider は各モジュールに関連する構成ファイルを自動的に検出し、そこからモジュール解決ルールを使用できます。以下の 使用する webpack 構成ファイルの指定を参照してください。
webpack バージョン 2 以降では、JetBrains Rider で webpack 構成ファイル内のオプションに対するコード補完およびクイックドキュメントルックアップが利用できます。
始める前に
Node.js をダウンロードしてインストールします。
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに Webpack プラグインをインストールして有効にします。
JetBrains Rider での webpack の構成
package.json に webpack を追加する
webpack が package.json の
dependenciesまたはdevDependenciesオブジェクトにリストされていることを確認してください。webpack が見つからない場合は、内蔵 ターミナル （Alt+F12 ）を開き、次のように入力します。
npm install --save-dev webpack
webpack 構成ファイルを作成する
プロジェクトの構造に応じて、構成ファイルを 1 つまたは複数作成します。 エクスプローラー ツールウィンドウ（Alt+1 ）で親フォルダーを選択し、コンテキストメニューから を選択してください。 webpack オフィシャル Web サイトの詳細を参照してください。
使用する webpack 構成ファイルを指定する
webpack 構成ファイルの分析に基づいて、JetBrains Rider は webpack 構成を理解し、モジュールを解決し、JavaScript ファイルでコーディング支援を提供します。以下の モジュールの解決を参照してください。
JetBrains Rider では、自動または手動の構成モードを選択できます。
自動構成を使用すると、JetBrains Rider は各 JavaScript ファイルに関連する webpack 構成ファイルを自動検出します。
手動構成を使用すると、プロジェクトで使用する webpack 構成ファイルを指定できます。 webpack 構成ファイルの名前が JetBrains Rider で認識されない場合は、下記の 認識されている webpack 構成名のリストを参照してください。
webpack 構成を検出する方法を選択する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
モジュール解決のための Webpack 構成ファイルを検出 領域で、次のいずれかのオプションを選択します。
自動： このモードでは、JavaScript ファイルの場合、JetBrains Rider は最初にこの JavaScript ファイルが置かれているフォルダーで webpack 構成ファイルを探し、次にその親フォルダーなどで検索を続けます。
その結果、プロジェクトが異なる webpack 構成を持つ複数のモジュールで構成されている場合、各モジュールは自身の webpack 構成ファイルのモジュール解決ルールを使用します（そのような構成ファイルが見つかった場合）。
JetBrains Rider は、JavaScript または TypeScript webpack 構成ファイルを、次の名前および次の順序で認識します：
webpack.config.js / webpack.config.ts
webpack.base.conf.js / webpack.base.conf.ts
webpack.dev.conf.js / webpack.dev.conf.ts
webpack.prod.conf.js / webpack.prod.conf.ts
webpack.base.config.js / webpack.base.config.ts
webpack.dev.config.js / webpack.dev.config.ts
webpack.prod.config.js / webpack.prod.config.ts
webpack.babel.js / webpack.babel.ts
手動：: 構成ファイル フィールドで、使用する webpack 構成の場所を指定します。
このモードでは、指定された構成ファイルの解決ルールがプロジェクト内のすべてのモジュールに適用されます。
webpack 構成ファイルの名前が JetBrains Rider で認識されない場合は、このオプションを選択します。上記の 認識される webpack 構成名のリストを参照してください。
webpack 公式 Web サイトの オンラインドキュメント(英語)も参照してください。
webpack 構成ファイルの編集
webpack バージョン 2 以降では、JetBrains Rider は webpack 構成ファイルの構成オブジェクトでコード補完およびドキュメント参照を提供します。 コード補完はオンザフライで提供されます。 シンボルのドキュメントを表示するには、 Ctrl+Q を押します。
モジュールの解決
プロジェクトを開くか webpack 構成ファイル（自動検出または 設定 | 言語 & フレームワーク | JavaScript | Webpack で指定）を編集すると、JetBrains Rider はバックグラウンドで構成を分析し、受信した情報にもとづいて、プロジェクトの resolve rootsと resolve エイリアスを正確に認識します。 このようにプロジェクト構成を理解することで、JetBrains Rider は JavaScript ファイルのインポートやエクスポートされたシンボルに対して、より精度の高いコード補完を提供できます。 その結果、何もしなくてもすべてが正常に機能します。
下の図は、 react-color がパス './src/index.js' のエイリアスであるプロジェクトでのモジュール解決を示しています。 JetBrains Rider は react-color からのインポートを正確に解決し、対象へのナビゲーションやエクスポートされたシンボルの補完も提供します：
webpack を使用するアプリケーションのデバッグ
webpack を利用したアプリケーションも、ほかの JavaScript クライアントサイドアプリケーションと同様にデバッグできます。 Create React App で作成した React アプリのデバッグおよび Angular CLI で作成した Angular アプリのデバッグを参照してください。