Resolve

이 옵션은 모듈을 해석하는 방식을 변경 할 수 있습니다. webpack은 알맞은 기본값을 제공하지만, 상세하게 해석 방식을 변경할 수 있습니다. 리졸버의 동작 방식에 대한 자세한 설명은 Module Resolution을 참고하세요.

resolve

object

모듈 해석에 대한 설정. 예를 들어 ES2015에서 import 'lodash'를 호출할 때, resolve 옵션은 webpack이 'lodash'를 찾는 위치를 변경할 수 있습니다. (modules를 참고하세요).

webpack.config.js

module.exports = {
  //...
  resolve: {
    // 설정 옵션
  },
};

resolve.alias

object

import나 require로 간단히 특정 모듈의 별칭을 만들 수 있습니다. 예를 들어, 일반적으로 사용되는 src/ 폴더의 별칭을 지정할 수 있습니다.

webpack.config.js

const path = require('path');

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

이제 상대 경로를 사용하는 대신 다음과 같이 사용할 수 있습니다.

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

별칭을 사용할 수 있습니다.

import Utility from 'Utilities/utility';

뒤에 $를 객체의 키에 추가하여 정확하게 일치하도록 할 수 있습니다.

webpack.config.js

const path = require('path');

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'; // 정확한 매칭이 아니고 일반적인 방식으로 가져옵니다.

다음 표는 다른 사례들을 보여줍니다.

alias:	import 'xyz'	import 'xyz/file.js'
{}	/abc/node_modules/xyz/index.js	/abc/node_modules/xyz/file.js
{ xyz: '/abc/path/to/file.js' }	/abc/path/to/file.js	error
{ xyz$: '/abc/path/to/file.js' }	/abc/path/to/file.js	/abc/node_modules/xyz/file.js
{ xyz: './dir/file.js' }	/abc/dir/file.js	error
{ 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	error
{ xyz: 'modu/dir' }	/abc/node_modules/modu/dir/index.js	/abc/node_modules/modu/dir/file.js
{ xyz$: 'modu/dir' }	/abc/node_modules/modu/dir/index.js	/abc/node_modules/xyz/file.js

index.js가 package.json에 정의되어 있으면 다른 파일로 해석될 수 있습니다.

/abc/node_modules는 /node_modules로 해석될 수 있습니다.

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

resolve.alias를 false로 설정하면 webpack은 모듈을 무시합니다.

module.exports = {
  //...
  resolve: {
    alias: {
      'ignored-module': false,
      './ignored-module': false,
    },
  },
};

resolve.aliasFields

[string]: ['browser']

예를 들면 browser 같이 구문을 분석할 필드를 지정합니다.

webpack.config.js

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

resolve.byDependency

모듈 요청의 유형별로 해석 옵션이 설정됩니다.

• Type: [type: string]: ResolveOptions

• Example:

  module.exports = {
    // ...
    resolve: {
      byDependency: {
        // ...
        esm: {
          mainFields: ['browser', 'module'],
        },
        commonjs: {
          aliasFields: ['browser'],
        },
        url: {
          preferRelative: true,
        },
      },
    },
  };

resolve.cache

boolean

성공적으로 해결된 요청을 캐싱하여 캐시 항목의 유효성을 다시 검사할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    cache: true,
  },
};

resolve.cachePredicate

function(module) => boolean

요청을 캐시할 지 여부를 결정하는 함수입니다. 객체는 path와 request 속성을 사용하여 함수로 전달합니다. 반드시 boolean을 반환해야 합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    cachePredicate: (module) => {
      // 추가 로직
      return true;
    },
  },
};

resolve.cacheWithContext

boolean

안전하지 않은 캐시가 활성화되었을 경우에는 캐시키에 request.context를 포함합니다. 이 옵션은 enhanced-resolve 모듈에서 고려됩니다. resolve 또는 resolveLoader 플러그인이 제공되면 캐싱을 해석하는 컨텍스트가 무시됩니다. 이것은 성능 문제를 해결합니다.

resolve.conditionNames

string[]

패키지의 엔트리 포인트를 정의하는 exports 필드의 조건 이름입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

Webpack은 resolve.conditionNames 배열 내에 나열된 export 조건과 일치합니다.

exports 필드의 키 순서는 중요합니다. 조건 일치 시 이전 항목이 더 높은 우선 순위를 가지며 이후 항목보다 우선합니다.

예를들면 다음과 같습니다.

package.json

{
  "name": "foo",
  "exports": {
    ".": {
      "import": "./index-import.js",
      "require": "./index-require.js",
      "node": "./index-node.js"
    },
    "./bar": {
      "node": "./bar-node.js",
      "require": "./bar-require.js"
    },
    "./baz": {
      "import": "./baz-import.js",
      "node": "./baz-node.js"
    }
  }
}

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

importing

• 'foo'는 'foo/index-require.js'로 해석됩니다.
• 'foo/bar'는 "node" 키가 조건부 export 객체의 "require"키보다 앞에 오기 때문에 'foo/bar-node.js'로 해석됩니다.
• 'foo/baz'는 'foo/baz-node.js'로 해석됩니다.

resolve.descriptionFiles

[string] = ['package.json']

설명에 사용할 JSON 파일입니다.

webpack.config.js

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

resolve.enforceExtension

boolean = false

true이면, 확장자가 없는 파일을 허용하지 않습니다. 기본적으로 require('./foo')는 ./foo가 .js 확장자를 가지고 있으면 동작하지만, 이 기능을 사용하면 require('./foo.js')만 동작합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    enforceExtension: false,
  },
};

resolve.exportsFields

[string] = ['exports']

요청된 모듈을 해석하는데 사용되는 package.json 필드입니다. 자세한 내용은 package-exports guideline를 참고하세요.

webpack.config.js

module.exports = {
  //...
  resolve: {
    exportsFields: ['exports', 'myCompanyExports'],
  },
};

resolve.extensionAlias

object

확장자를 확장자 별칭에 매핑하는 객체입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs'],
    },
  },
};

resolve.extensions

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

이러한 확장자를 순서대로 해석합니다. 여러 파일에서 이름이 동일하지만 다른 확장자를 가진 경우, webpack은 배열의 앞에서부터 파일을 해석하고 남은 것은 해석하지 않습니다.

webpack.config.js

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

이는 사용자가 import 할 때 확장자를 생략 할 수 있도록 합니다.

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

위와 같이 resolve.extensions를 사용하면 기본 배열을 재정의 할 수 있으며, 이는 webpack이 더 이상 기본 확장자를 사용하여 모듈을 해석하지 않습니다. 하지만 '...' 을 이용하여 기본 확장자에 접근 할 수 있습니다.

module.exports = {
  //...
  resolve: {
    extensions: ['.ts', '...'],
  },
};

resolve.fallback

object

정상적인 확인이 실패하면 모듈 요청을 리디렉션합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    fallback: {
      abc: false, // abc에 대한 폴리필을 포함하지 않습니다.
      xyz: path.resolve(__dirname, 'path/to/file.js'), // xyz에 대한 폴리필을 포함합니다.
    },
  },
};

Webpack 5는 더 이상 Node.js의 핵심 모듈을 자동으로 폴리필하지 않습니다. 즉, 브라우저 등에서 실행되는 코드에서 사용하는 경우 npm에서 호환되는 모듈을 설치하고 직접 포함해야 합니다. 다음은 webpack 5 이전에 사용한 폴리필 목록입니다.

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

resolve.fullySpecified

boolean

이 옵션을 true로 설정하면 사용자가 지정한 요청을 완전히 지정한 것으로 취급합니다. 즉, 확장자가 자동으로 추가되지 않고 디렉터리 내의 mainFiles도 해석되지 않습니다. 이 동작은 mainFields, aliasFields 또는 aliases를 통해 이루어진 요청에 영향을 미치지 않습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    fullySpecified: true,
  },
};

resolve.importsFields

[string]

패키지의 내부 요청에 사용되는 package.json 필드입니다. (#으로 시작하는 요청은 내부로 간주됩니다).

webpack.config.js

module.exports = {
  //...
  resolve: {
    importsFields: ['browser', 'module', 'main'],
  },
};

resolve.mainFields

[string]

import * as D3 from 'd3'와 같이 npm 패키지를 가져올 때 이 옵션은 package.json의 어떤 필드를 검사할 지 결정합니다. 기본값은 webpack 설정에 지정된 target에 따라 달라집니다.

target 속성을 webworker, web이나 설정하지 않은 경우는 다음과 같습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main'],
  },
};

다른 target의 경우(node포함)

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'main'],
  },
};

예를 들어 다음 필드가 포함된 package.json에 있는 upstream이라는 임의의 라이브러리를 고려해보세요.

{
  "browser": "build/upstream.js",
  "module": "index"
}

import * as Upstream from 'upstream'을 실행하면 실제로 browser 속성의 파일로 해석됩니다. browser 속성은 mainFields의 첫 번째 항목이기 때문에 우선하여 해석합니다. 한편, webpack에 의해 번들된 Node.js 애플리케이션은 먼저 module 필드의 파일을 사용하여 해석하려고 시도합니다.

resolve.mainFiles

[string] = ['index']

디렉터리를 해석하는 동안 사용할 파일 이름입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFiles: ['index'],
  },
};

resolve.modules

[string] = ['node_modules']

모듈을 해석할 때 검색할 디렉터리를 webpack에 알려줍니다.

절대 경로와 상대 경로를 모두 사용하지만, 약간 다르게 동작 할 수 있습니다.

상대 경로는 Node가 현재 디렉터리와 상위 디렉터리를 통해 node_modules를 검색하는 방법과 유사하게 검색됩니다.

절대 경로는 오직 주어진 디렉터리에서만 검색합니다.

webpack.config.js

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

node_modules/보다 우선으로 검색할 디렉터리를 추가하는 것은 다음과 같습니다.

webpack.config.js

const path = require('path');

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

resolve.plugins

[Plugin]

추가로 해석할 플러그인 리스트를 적용해야 합니다. DirectoryNamedWebpackPlugin과 같은 플러그인을 허용합니다.

webpack.config.js

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

resolve.preferAbsolute

boolean

5.13.0+

해석할 때 resolve.roots보다 절대 경로를 선호합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferAbsolute: true,
  },
};

resolve.preferRelative

boolean

이 옵션을 활성화하면, webpack은 node_modules 디렉터리의 모듈을 사용하는 대신 상대적인 요청으로 해석하려 합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferRelative: true,
  },
};

src/index.js

// `src/logo.svg`가 존재한다고 가정해 보세요.
import logo1 from 'logo.svg'; // 이것은 `preferRelative`가 활성화되었을 때 가능합니다
import logo2 from './logo.svg'; // 그렇지 않으면 상대 경로만 사용하여 logo.svg를 해석할 수 있습니다

// `preferRelative` 는 `new URL()` 경우 기본으로 활성화됩니다.
const b = new URL('module/path', import.meta.url);
const a = new URL('./module/path', import.meta.url);

resolve.restrictions

[string, RegExp]

요청을 해석할 수 있는 경로를 제한하는 해석 제한 목록입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    restrictions: [/\.(sass|scss|css)$/],
  },
};

resolve.roots

[string]

서버 관련 URL('/'로 시작하는) 요청이 해석된 디렉터리의 목록으로, 설정 옵션은 context가 기본값입니다. Window가 아닌 시스템에서 이런 요청은 절대 경로로 먼저 해석합니다.

webpack.config.js

const fixtures = path.resolve(__dirname, 'fixtures');
module.exports = {
  //...
  resolve: {
    roots: [__dirname, fixtures],
  },
};

resolve.symlinks

boolean = true

심볼릭 링크를 심볼릭 링크된 위치로 해석할지 여부입니다.

활성화되면 심볼릭 링크된 리소스는 심볼릭 링크된 위치가 아닌 실제 경로에서 해석합니다. npm link와 같이 패키지를 심볼릭 링크하는 툴로 사용할 때, 모듈 해석이 실패할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    symlinks: true,
  },
};

resolve.unsafeCache

object boolean = true

공격적이지만 안전하지 않은 모듈 캐싱을 활성화합니다. true로 설정하면 모든 것이 캐싱 됩니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    unsafeCache: true,
  },
};

객체가 제공되면 webpack은 이를 캐시로 사용합니다.

예를 들면 일반 객체 대신 프록시 객체를 제공할 수 있습니다.

webpack.config.js

// 여기 토론에서 복사했습니다 https://github.com/webpack/webpack/discussions/18089
const realUnsafeCache = {};
const unsafeCacheHandler = {
  get(cache, key) {
    const cachedValue = cache[key];

    // 파일이 디스크에 있는지 확인하세요
    if (cachedValue && !fs.existsSync(cachedValue.path)) {
      // 그렇지 않은 경우 해당 캐시 항목을 제거합니다.
      delete cache[key];
      return undefined;
    }

    return cachedValue;
  },
};
const theProxiedCache = new Proxy(realUnsafeCache, unsafeCacheHandler);
module.exports = {
  //...
  resolve: {
    unsafeCache: theProxiedCache,
  },
};

resolve.useSyncFileSystemCalls

boolean

리졸버에 대한 동기 파일 시스템 호출을 사용합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    useSyncFileSystemCalls: true,
  },
};

resolveLoader

object { modules [string] = ['node_modules'], extensions [string] = ['.js', '.json'], mainFields [string] = ['loader', 'main']}

이 옵션들은 위에 설정된 resolve 속성과 동일하지만, webpack의 loader 패키지를 해석하는데만 사용됩니다.

webpack.config.js

module.exports = {
  //...
  resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },
};