webpack resolve

Resolve

 

resolver 작동 방식에 대한 자세한 설명은 Module Resolution을 참조하세요.

 

resolve.alias

object

import또는 require특정 모듈에 대한 alias를 보다 쉽게 작성합니다. 예를 들어 일반적으로 사용되는 여러 src/폴더 의 alias를 지정하려면

// webpack.config.js

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

이제 가져올 때 상대 경로를 사용하는 대신 다음과 같이하십시오.

import Utility from '../../utilities/utility';

alias을 사용할 수 있습니다.

import Utility from 'Utilities/utility';

정확한 일치를 나타내기 위해 주어진 객체의 키에 $를 추가 할 수도 있습니다.

// webpack.config.js

module.exports = {
  //...
  resolve: {
    alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js')
    }
  }
};

결과는 다음과 같습니다.

import Test1 from 'xyz'; // 정확히 일치하므로 path / to / file.js를 확인하고 가져옵니다.
import Test2 from 'xyz/file.js'; //정확히 일치하지는 않으며 normal resolution이 발생합니다.

 

다음 표는 다른 케이스에 대한 설명입니다.

alias:	import 'xyz'	import 'xyz/file.js'
{}	/abc/node_modules/xyz/index.js	/abc/node_modules/xyz/file.js
{ xyz: '/abs/path/to/file.js' }	/abs/path/to/file.js	오류
{ xyz$: '/abs/path/to/file.js' }	/abs/path/to/file.js	/abc/node_modules/xyz/file.js
{ xyz: './dir/file.js' }	/abc/dir/file.js	오류
{ xyz$: './dir/file.js' }	/abc/dir/file.js	/abc/node_modules/xyz/file.js
{ xyz: '/some/dir' }	/some/dir/index.js	/some/dir/file.js
{ xyz$: '/some/dir' }	/some/dir/index.js	/abc/node_modules/xyz/file.js
{ xyz: './dir' }	/abc/dir/index.js	/abc/dir/file.js
{ xyz: 'modu' }	/abc/node_modules/modu/index.js	/abc/node_modules/modu/file.js
{ xyz$: 'modu' }	/abc/node_modules/modu/index.js	/abc/node_modules/xyz/file.js
{ xyz: 'modu/some/file.js' }	/abc/node_modules/modu/some/file.js	오류
{ xyz: 'modu/dir' }	/abc/node_modules/modu/dir/index.js	/abc/node_modules/dir/file.js
{ xyz: 'xyz/dir' }	/abc/node_modules/xyz/dir/index.js	/abc/node_modules/xyz/dir/file.js
{ xyz$: 'xyz/dir' }	/abc/node_modules/xyz/dir/index.js	/abc/node_modules/xyz/file.js

resolve.aliasFields

[string]: ['browser']

browser 와 같은 filed를 구체화 하고, 이 명세서에 따라 파싱됩니다.

// webpack.config.js

module.exports = {
  //...
  resolve: {
    aliasFields: ['browser']
  }
};

* 한국어로 설명된 문서가 없어서 잘 모르겠습니다...... 이게 뭐죠..?

resolve.cacheWithContext

boolean(웹팩 3.1.0부터)

안전하지 않은 캐시가 활성화되면 request.context캐시 키에 포함 됩니다. 이 옵션은 enhanced-resolve(비동기 require.resolve 기능을 제공합니다. )모듈에서 고려 합니다. webpack 3.1.0 이후로 resolve 또는 resolveLoader 플러그인이 제공되면 resolve 캐싱의  컨텍스트가 무시됩니다. 이것은 성능 회귀를 해결합니다.

컨텍스트 특정이 아닌 사용자 정의 해석 플러그인을 사용하는 경우 resolve.cacheWithContext: false 를 설정하면 resolve 속도가 빨라진다.

resolve.descriptionFiles

[string] = ['package.json']

설명에 사용할 JSON 파일

module.exports = {
  //...
  resolve: {
    descriptionFiles: ['package.json']
  }
};

resolve.enforceExtension

boolean = false

만약 true인 경우 확장명이 없는 파일은 허용되지 않습니다. 기본적으로 require('./foo')은 .js 확장자가 붙는것처럼 잘 동작하지만, 이것을 활성화하면 require ( './ foo.js') 만 작동합니다.

resolve.enforceModuleExtension

boolean = false

웹팩 5에서 제거

웹팩에 모듈 (예 : 로더) 들이 확장을 사용해야하는지 여부를 알려줍니다.

module.exports = {
  //...
  resolve: {
    enforceModuleExtension: false
  }
};

resolve.extensions

[string] = ['.wasm', '.mjs', '.js', '.json']

위와 같은 확장자 순서대로 해결한다.

여러 파일이 동일한 이름을 공유하지만 확장자가 다른 경우 webpack은 배열에서 확장자가 첫 번째로 나열된 파일을 확인하고 나머지는 건너 뜁니다.

module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json']
  }
};

파일을 가져올 때 사용자가 확장자을 안 쓸 수 있습니다.

import File from '../path/to/file';

 

웹팩은 더 이상 기본 확장자를 사용하여 모듈을 해결하려고 시도하지 않습니다.

resolve.modules

[string] = ['node_modules']

모듈을 해결할 때 어떤 디렉토리를 검색해야하는지 webpack에 알려줍니다.

절대 경로와 상대 경로를 모두 사용할 수 있지만 약간 다르게 동작한다는 점에 유의하세요.

상대 경로는 현재 디렉토리와 상위 디렉토리 (예 : ./node_modules, ../node_modules 및 on)를 통해 Node_modules를 검색하는 방법과 유사하게 스캔됩니다.

절대 경로를 사용하면 지정된 디렉토리에서만 검색합니다.

module.exports = {
  //...
  resolve: {
    modules: ['node_modules']
  }
};

검색 할 디렉토리를 추가하려면 node_modules /보다 앞에 작성합니다.

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};

resolve.plugins

[plugin]

적용해야 할 resolve 플러그인 목록입니다.

module.exports = {
  //...
  resolve: {
    plugins: [
      new DirectoryNamedWebpackPlugin()
    ]
  }
};

https://webpack.js.org/configuration/resolve/

Resolve | webpack