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. CSS/UIフレームワークに対応したAdobe XDのUIキット一覧

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

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

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

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

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

PAGE TOP