webpackがモジュールのimportを解決する仕組み

HoteKanの開発担当者です。

webpackではimport、exportを使ってモジュール解決ができます。
しかし、webpackのimportは厳密にはES2015(ES6)のimportとは違います。
webpackでは独自のモジュール解決ルールを持っています。

普段はほとんど気にする必要はないですが、何か問題が起こった際にはこの独自ルールを知ってないとハマることになるでしょう。

webpackがモジュールのimportを解決する仕組み

モジュールが絶対パス/相対パスで指定されている場合

import '/home/me/file';
import '../src/file1';

これは簡単です。
指定されたファイルを見に行くだけです。

モジュール名を使って指定されている場合

import 'module';
import 'module/lib/file';

npmを使ってパッケージをインストールした場合利用する方法です。
この場合以下の順序でモジュール解決が行われます。

  1. webpackの設定でresolve.modulesで指定されたディレクトリ内からモジュールを探します。
  2. 指定されたパスに拡張子がついている場合、該当するファイルで解決されます。
  3. 拡張子がない場合、resolve.extentionsで指定された拡張子のファイルがないか探します。あればそのファイルで解決されます。該当するファイルが複数ある場合、resolve.extentionsで最初にリストされている拡張子が採用されます。
  4. 指定されたパスがフォルダで、かつ、そのフォルダにpackage.jsonがある場合、resolve.mainFieldsに指定されたフィールドをresolve.mainFieldsでの指定順に探します。見つかればそこに記載されたファイルで解決されます。
  5. 指定されたパスがフォルダで、package.jsonがない場合、あるいは、package.jsonはあるがresolve.mainFieldsで指定されたフィールドがバリッドなファイルパスを返さない場合、resolve.mainFilesで指定されたファイルを探します。その際もresolve.extentionsが参照されます。

各webpackオプションのデフォルト値は以下の通りです。

module.exports = {
  //...
  resolve: {
    modules: ['node_modules'],
    extensions: ['.wasm', '.mjs', '.js', '.json'],
    mainFields: ['browser', 'module', 'main'],
    mainFiles: ['index']
  }
};

上記のresolve.mainFieldsに関してはwebpackのtargetオプションの設定によってデフォルト値が変ります。上記はwebworkerwebか指定無しの場合で、それ以外では['module', 'main']がデフォルト値となります。

関連記事

  1. VS Codeでprettier拡張機能を使ってvueファイルをフォー…

  2. アプリ設計におけるUI検討の難しさとAdobe XD

  3. CSS/UIフレームワークに対応したAdobe XDのUIキット一覧

  4. Cloud BuildでのGitHub連携とファイルの暗号化・復号化

  5. firebase Javascript SDK をIE11対応にする

  6. gitのclean filterとsmudge filterを使ったC…

最近のBLOG

  1. 2024.05.21

    SusHi Tech Tokyo
  2. 2024.03.19

    TRY ANGLE EHIME
  3. 2024.01.2

    仕事始め
  4. 2023.12.30

    良いお年を
  5. 2023.12.5

    LAUNCHPAD SEED
PAGE TOP