WebStorm 2024.1 ヘルプ

Webpack

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

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

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

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

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

WebStorm での webpack の構成

package.json に webpack を追加する

  • webpack が package.jsondependencies または devDependencies オブジェクトにリストされていることを確認してください。

    webpack が見つからない場合は、内蔵ターミナルAlt+F12)を開き、次のように入力します。

    npm install --save-dev webpack

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

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

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

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

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

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

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

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

  1. 設定ダイアログ(Ctrl+Alt+S)を開き、言語 & フレームワーク | JavaScript | Webpack に移動します。

  2. モジュール解決のための 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 を押します。

Editing a webpack configuration file

モジュールの解決

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

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

Module resolution for aliases

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

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

関連ページ:

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

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

Vitest

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

JSON

JSON 形式は、データの保存と構成ファイルに一般的に使用されます。WebStorm は、JSON ファイルの操作を支援します。構文とフォーマットをチェックします。一般的なタイプの構成ファイルでは、WebStorm はコード補完を提供します。JSON スキーマは、そのようなファイルの構造と内容を記述するための特別な形式です。カスタム JSON スキーマを使用して、JSON ファイルでコード補完を有効にして検証することもできます。JSON5 を有効にする:WebStorm は、JSON5 を含む多く...