Webpack

WebStorm は webpack(英語) モジュールバンドラーと統合されています。このサポートは、webpack モジュールの解決とエイリアスの解決(英語)を考慮に入れることにより、JavaScript ファイルのコーディング支援を改善します。

異なる webpack 構成を持つ複数のモジュールで構成されるプロジェクトでは、WebStorm は各モジュールに関連する構成ファイルを自動的に検出し、そこからモジュール解決ルールを使用できます。以下の使用する webpack 構成ファイルの指定を参照してください。

webpack バージョン 2 以降の場合、WebStorm は、コード補完と、webpack 構成ファイルのオプションのクイックドキュメントルックアップを提供します。

始める前に

お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定で Webpack プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに Webpack と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

WebStorm での webpack の構成

package.json に webpack を追加する

webpack が package.json の dependencies または devDependencies オブジェクトにリストされていることを確認してください。
webpack が見つからない場合は、内蔵ターミナル（Alt+F12）を開き、次のように入力します。
npm install --save-dev webpack

webpack 構成ファイルを作成する

プロジェクト構造に応じて 1 つまたは複数の構成ファイルを作成します。プロジェクトツールウィンドウ Alt+1 で親フォルダーを選択し、コンテキストメニューから新規 | JavaScript ファイルを選択します。詳細については、webpack 公式 Web サイト(英語)を参照してください。

使用する webpack 構成ファイルを指定する

webpack 構成ファイルの分析に基づいて、WebStorm は webpack 構成を理解し、モジュールを解決し、JavaScript ファイルでコーディング支援を提供します。以下のモジュールの解決を参照してください。

WebStorm では、自動と手動の 2 つの構成モードから選択できます。

自動構成を使用すると、WebStorm は各 JavaScript ファイルに関連する webpack 構成ファイルを自動検出します。

手動構成では、プロジェクトで使用する webpack 構成ファイルを指定します。webpack 構成ファイルの名前が WebStorm で認識されない場合は、手動構成が便利です。以下の認識される webpack 構成名のリストを参照してください。

webpack 構成を検出する方法を選択する

設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | Webpack に移動します。
モジュール解決のための Webpack 構成ファイルの検出領域で、次のいずれかのオプションを選択します。
- 自動 : このモードでは、JavaScript ファイルの場合、WebStorm は最初にこの JavaScript ファイルが配置されているフォルダーで webpack 構成ファイルを検索し、次にその親フォルダーで検索します。
  その結果、プロジェクトが異なる webpack 構成の複数のモジュールで構成されている場合、各モジュールは独自の webpack 構成ファイルのモジュール解決ルールを使用します（そのような構成が見つかった場合）。
  WebStorm は、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 構成ファイルの名前が WebStorm で認識されない場合は、このオプションを選択します。上記の認識される webpack 構成名のリストを参照してください。

webpack 公式 Web サイトのオンラインドキュメント(英語)も参照してください。

webpack 構成ファイルの編集

webpack バージョン 2 以降の場合、WebStorm は、webpack 構成ファイルの構成オブジェクトでコード補完およびドキュメントのルックアップを提供します。コード補完はオンザフライで提供されます。シンボルのドキュメントを表示するには、Ctrl+Q を押します。

モジュールの解決

プロジェクトを開くか、webpack 構成ファイル ( 自動検出または設定 | 言語 & フレームワーク | JavaScript | Webpack で指定されたファイル) を編集すると、WebStorm はバックグラウンドで構成を分析し、受信した情報に基づいて、プロジェクトのルート解決(英語)とエイリアスの解決(英語)を適切に理解します。プロジェクト構成のこの理解のおかげで、WebStorm は JavaScript ファイルのインポートおよびエクスポートされたシンボルに対してより正確なコード補完を提供します。その結果、何もしなくてもすべてが正常に機能します。

下の図は、react-color がパス './src/index.js' のエイリアスであるプロジェクトでのモジュール解決を示しています。WebStorm は react-color からのインポートを正しく解決し、それへのナビゲーションとエクスポートされたシンボルの補完を提供します。

webpack を使用するアプリケーションのデバッグ

webpack を使用するアプリケーションは、JavaScript クライアント側アプリケーションをデバッグするのと同じ方法でデバッグできます。Create React App で作成した React アプリケーションのデバッグ(英語)および Angular CLI で作成された Angular アプリケーションのデバッグ(英語)を参照してください。

最終更新日: 2024 年 11 月 22 日

関連ページ：

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

Vitest

WebStorm は、Vite-native 単体テストフレームワークである Vitest と統合されます。実行、デバッグ、スナップショットテストの実行、およびエディターと実行 / デバッグ構成の両方からのテストカバレッジの測定を行うことができます。失敗したテストを再実行するか、監視モードをオンにすることができます。このモードでテストセッションを起動すると、WebStorm はプロジェクトソースコードの変更を監視します。テストまたはそのサブジェクトに変更が加えられるとすぐに、WebStorm は影響...

JSON

JSON 形式は、データの保存や構成ファイルの保存によく使用されます。WebStorm は JSON ファイルの操作に役立ち、構文とフォーマットをチェックします。一般的な種類の構成ファイルでは、WebStorm がコードを検証し、そのようなファイルの構造と内容を記述するための特別な形式である JSON スキーマに基づいてコード補完を提供します。WebStorm には、最も一般的な形式の登録済みスキーマセットがバンドルされています。JSON Schema Store のスキーマやカスタム JSON ス...