Webpack Resolve

• Webpack의 모듈 번들링 관점으로 봤을때 오듈을 어떤 위치에서 어떻게 로딩할지에 관한 정의를 하는 것이 Module Resolution

  // 일반적인 모듈 로딩 방식
  import foo from 'path/to/module'
  // 또는
  require('path/to/module');
  

• 모듈을 어떻게 로딩해오느냐?에 주목
  1. 절대 경로를 이용한 파일 로딩

     import "/home/me/file";
     import "C:\\Users\\me\\file";
     

  2. 상대경로를 이용한 파일 로딩
• 해당 모듈이 로딩되는 시점의 위치에 기반하여 상대 경로를 절대 경로로 인식하여 로딩

  import "../src/file1";
  import "./file2";
  

Resolve Option

• config파일에 resolve를 추가하여 모듈 로딩에 관련된 옵션 사용
• 관행상 plugins밑에 작성
• alias
  • 틀정 모듈을 로딩할 때 alias옵션을 이용하면 별칭으로 더 쉽게 로딩 가능 ```javascript alias: { Utilities: path.resolve(__dirname, ‘src/path/utilities/’) }

  import Utility from ‘../../src/path/utilities/utility’; // alias 사용시 ‘/src/path/utilities/’ 대신 ‘Utilities’ 활용 import Utility from ‘Utilities/utility’; ```

• modules
  • require(), import ''등의 모듈 로딩시에 어느 폴더에 기준할 것인지 정하는 옵션

      modules: ["node_modules"]   // defaults
      modules: [path.resolve(__dirname, "src"), "node_modules"]   // src/node_modules