Module Variables

이 섹션에서는 webpack으로 컴파일된 코드에서 사용할 수 있는 모든 변수를 다룹니다. 모듈은 module 및 기타 변수를 통해 컴파일 프로세스의 특정 데이터에 접근할 수 있습니다.

module.loaded (NodeJS)

모듈이 현재 실행 중이면 false이고, 실행이 완료되면 true입니다.

module.hot (webpack-specific)

Hot Module Replacement가 활성화되었는지 여부를 나타내며 프로세스를 위한 인터페이스를 제공합니다. 자세한 내용은 HMR API 페이지를 참고하세요.

module.id (CommonJS)

현재 모듈의 ID입니다.

module.id === require.resolve('./file.js');

module.exports (CommonJS)

사용자가 모듈을 require 호출할 ë•Œ 반환할 값을 정의합니다 (기본값은 새 객체).

module.exports = function doSomething() {
  // Do something...
};

exports (CommonJS)

이 변수는 module.exports(즉. 객체)의 기본값과 같습니다. module.exports를 덮어쓰면, exports를 더 내보내지 않습니다.

exports.someValue = 42;
exports.anObject = {
  x: 123,
};
exports.aFunction = function doSomething() {
  // Do something
};

global (NodeJS)

node.js global을 참고하세요.

호환성을 위해 webpack은 기본적으로 global 변수를 폴리필합니다.

__dirname (NodeJS)

node.__dirname의 설정 옵션은 다음과 같습니다.

• false: 정의되지 않음
• mock: '/'와 같음
• true: node.js __dirname

파서에 의해 파싱되는 표현식 내부에서 사용되는 경우, 설정 옵션은 trueë¡œ 처리됩니다.

import.meta

import.meta는 모듈의 URLê³¼ 같은 컨텍스트별 메타데이터를 JavaScript 모듈에 노출합니다. ESM에서만 사용할 수 있습니다.

Webpack은 import.meta에 대한 직접 액세스를 지원하지 않습니다. 대신 해당 속성에 액세스하거나 디스트럭처링 할당을 사용해야 합니다. 예를 들면,

// webpack은 이에 대해 경고할 것입니다.
Object.keys(import.meta);

// 사용해도 괜찮습니다.
console.log(import.meta.url);
const { url } = import.meta;

import.meta.url

모듈의 절대 file: URL을 반환합니다.

src/index.js

console.log(import.meta.url); // `file:///path/to/your/project/src/index.js`와 같은 출력

import.meta.webpack

webpack 버전을 반환합니다.

src/index.js

console.log(import.meta.webpack); // webpack 5의 경우 `5` 출력

import.meta.webpackHot

Webpack 특유의 속성입니다. module.hot의 별칭으로, import.meta.webpackHot은 strict ESM에서 사용할 수 있지만 module.hot은 í•  수 없습니다.

import.meta.webpackContext

require.context와 동일한 값을 반환하지만 javascript/auto 및 javascript/esm에 대해서만 반환합니다.

• Type:

  Copy

  (
    request: string,
    options?: {
      recursive?: boolean;
      regExp?: RegExp;
      include?: RegExp;
      exclude?: RegExp;
      preload?: boolean | number;
      prefetch?: boolean | number;
      chunkName?: string;
      exports?: string | string[][];
      mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once';
    }
  ) => webpack.Context;

• Available: 5.70.0+

• Example:

  Copy

  const contextRequire = import.meta.webpackContext('.', {
    recursive: false,
    regExp: /two/,
    mode: 'weak',
    exclude: /three/,
  });

__filename (NodeJS)

node.__filename의 설정 옵션은 다음과 같습니다.

• false: 정의되지 않음
• mock: '/index.js'와 같음
• true: node.js __filename

파서에 의해 파싱되는 표현식 내부에서 사용되는 경우, 설정 옵션은 trueë¡œ 처리됩니다.

__resourceQuery (webpack-specific)

현재 모듈의 리소스 쿼리입니다. 다음 requireê°€ 호출된 경우, 쿼리 문자열은 file.js에서 사용할 수 있습니다.

require('file.js?test');

file.js

__resourceQuery === '?test';

__webpack_public_path__ (webpack-specific)

설정 옵션의 output.publicPath와 동일합니다.

__webpack_require__ (webpack-specific)

원시 요청 함수입니다. 이 표현식은 파서에 의해 의존성이 파싱되지 않습니다.

__webpack_chunk_load__ (webpack-specific)

내부 청크 로딩 함수. 하나의 인수를 가집니다.

• chunkId는 로드할 청크의 ID입니다.

하나가 실패했을 때 대체 퍼블릭 경로에서 청크를 로드하는 예제입니다.

const originalLoad = __webpack_chunk_load__;
const publicPaths = ['a', 'b', 'c'];
__webpack_chunk_load__ = async (id) => {
  let error;
  for (const path of publicPaths) {
    __webpack_public_path__ = path;
    try {
      return await originalLoad(id);
    } catch (e) {
      error = e;
    }
  }
  throw error;
};
import('./module-a').then((moduleA) => {
  // 이제 webpack은 사용자 정의 __webpack_chunk_load__ 를 사용하여 청크를 로드합니다.
});

__webpack_module__ (webpack-specific)

현재의 모듈에 접근할 수 있습니다. 엄격한 ESM에서는 모듈을 사용할 수 없습니다.

__webpack_module__.id (webpack-specific)

현재 모듈(module.id)의 ID에 접근할 수 있습니다. 엄격한 ESM에서는 모듈을 사용할 수 없습니다.

__webpack_modules__ (webpack-specific)

모든 모듈의 내부 객체에 대한 접근을 제공합니다.

__webpack_hash__ (webpack-specific)

컴파일의 해시에 대한 접근을 제공합니다.

__webpack_get_script_filename__ (webpack-specific)

function (chunkId)

id로 청크의 파일 이름을 제공합니다.

할당 가능하기 때문에 런타임에서 사용하는 파일 이름을 변경할 수 있습니다. 예를 들면 청크를 로드할 때 최종 경로를 결정하는 데 사용할 수 있습니다.

const oldFn = __webpack_get_script_filename__;

__webpack_get_script_filename__ = (chunkId) => {
  const filename = oldFn(chunkId);
  return filename + '.changed';
};

__non_webpack_require__ (webpack-specific)

webpack에 의해 파싱되지 않는 require 함수를 생성합니다. 가능한 경우 ì „ì—­ 요청 함수로 멋진 작업을 수행하는데 사용할 수 있습니다.

__webpack_exports_info__ (webpack-specific)

모듈에서, __webpack_exports_info__는 export 내부 검사를 허용하는데 사용할 수 있습니다.

• __webpack_exports_info__는 항상 true입니다.

• __webpack_exports_info__.<exportName>.used는 exportê°€ 사용되지 않는 경우 false이고, 그렇지 않으면 true입니다.

• __webpack_exports_info__.<exportName>.useInfo는 다음과 같습니다.

  • exportê°€ 사용되지 않는 경우 false

  • exportê°€ 사용되는 경우 true

  • export 사용이 런타임 조건에 따라 달라질 수 있는 경우 `null

    `

  • ì •ë³´ê°€ 없을 경우 undefined

• __webpack_exports_info__.<exportName>.provideInfo는 다음과 같습니다.

  • exportê°€ 제공되지 않는 경우 false

  • exportê°€ 제공되는 경우 true

  • export 규정이 런타임 조건에 따라 달라질 수 있는 경우 `null

    `

  • ì •ë³´ê°€ 없을 경우 undefined

• nested export에서 정보에 접근할 수 있습니다. 예. __webpack_exports_info__.<exportName>.<exportName>.<exportName>.used

• exportê°€ __webpack_exports_info__.<name>.canMangleë¡œ 맹글링될 수 있는지 확인합니다.

__webpack_is_included__ (webpack-specific)

주어진 모듈이 webpack에 의해 번들 되어 있는지 테스트합니다.

if (__webpack_is_included__('./module-a.js')) {
  // do something
}

__webpack_base_uri__ (webpack-specific)

런타임에 기본 URI를 변경합니다.

• Type: string

• Available: 5.21.0+

• Example:

  Copy

  __webpack_base_uri__ = 'https://example.com';

__webpack_runtime_id__

현재 엔트리의 runtime id에 접근합니다.

이것은 webpack의 고유 기능이며 webpack 5.25.0부터 사용할 수 있습니다.

src/index.js

console.log(__webpack_runtime_id__ === 'main');

DEBUG (webpack-specific)

설정 옵션 debug와 동일합니다.