Module Methods

이 섹션에서는 webpack으로 컴파일된 코드에서 사용할 수 있는 모든 메서드를 다룹니다. Webpack을 사용하여 애플리케이션을 번들할 때 ES6, CommonJS 및 AMD와 같은 여러 가지 구문 스타일 중 선택할 수 있습니다.

Webpack은 여러 모듈 구문을 지원하지만, 일관성을 유지하고 이상한 동작이나 버그를 피하려면 단일 구문을 따르는 것이 좋습니다. 실제로 webpack은 가장 가까운 상위 package.json 파일에 값이 "module" 이거나 commonjs인 "type" 필드가 포함된 경우, .mjs 파일, .cjs 파일 또는 .js 파일에 대한 권장 사항을 적용합니다. 계속해서 읽기 전에 다음 적용 사항을 알아보세요.

• package.json에 "type": "module"이 있는 .mjs 또는 .js.
  • CommonJSê°€ 허용되지 않습니다. 예를 들면 require, module.exports 또는 exports를 사용할 수 없습니다.
  • 가져올 ë•Œ 파일 확장자가 필요합니다. 예를 들어 import './src/App' 대신에 import './src/App.mjs'를 사용해야 합니다. (Rule.resolve.fullySpecified를 사용하여 이 사항을 비활성화할 수 있습니다.)
• package.json에 "type": "commonjs"ê°€ 있는 .cjs 또는 .js.
  • import도 export도 사용할 수 없습니다.
• package.json에 "type": "module"이 있는 .wasm.
  • wasm 파일을 가져올 ë•Œ 파일 확장자가 필요합니다.

ES6 (Recommended)

Webpack 버전 2는 기본적으로 ES6 모듈 구문을 지원합니다. 즉, babelê³¼ 같은 도구 없이 import 및 export를 사용하여 이를 처리할 수 있습니다. 다른 ES6+ 기능에는 여전히 babel이 필요할 수 있습니다. Webpack이 지원하는 메서드는 다음과 같습니다.

import

다른 모듈의 export를 정적으로 import 합니다.

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

Data URI를 import í•  수도 있습니다.

import 'data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7';
import {
  number,
  fn,
} from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';

export

무엇이든 default 또는 이름이 지정된 내보내기로 내보냅니다.

// 이름이 지정된 내보내기
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// 기본 내보내기
export default {
  // 데이터...
};

import()

function(string path):Promise

모듈을 동적으로 로드합니다. import()에 대한 호출은 분할 지점으로 처리됩니다. 즉, 요청된 모듈과 ê·¸ 자식은 별도의 청크로 분할됩니다.

if (module.hot) {
  import('lodash').then((_) => {
    // lodash(일명 '_')로 작업 수행...
  });
}

Dynamic expressions in import()

import(foo)와 같은 완전히 동적인 import 문을 사용하는 것은 불가능합니다. foo는 잠재적으로 시스템이나 프로젝트의 모든 파일에 대한 경로가 될 수 있기 때문입니다.

import()는 최소한 모듈 위치에 대한 정보를 포함해야 합니다. 번들링은 특정 디렉터리 또는 파일 집합으로 제한될 수 있습니다. 그러므로 동적 표현 식을 사용할 ë•Œ import() 호출 ì‹œ 잠재적으로 요청 가능한 모든 모듈이 포함됩니다. 예를 들어, import(`./locale/${language}.json`)는 ./locale 디렉터리와 하위 디렉터리에 있는 모든 .json 파일만 새 청크로 묶고 다른 파일 확장자를 가진 파일은 제외합니다. 런타임에 language 변수가 계산되면 english.json이나 german.jsonê³¼ 같은 모든 파일을 사용할 수 있습니다.

// 쿠키나 다른 저장소에서 언어를 가져오는 방법이 있다고 상상해 보세요.
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then((module) => {
  // 번역과 관련된 작업을 수행합니다.
});

Magic Comments

가져오기에 주석을 추가하여 청크의 이름을 지정하거나 다른 모드를 선택하는 등의 여러 작업을 할 수 있습니다. 이 특별한 주석의 전체 목록과 주석이 수행하는 작업은 아래 코드와 설명을 참고하세요.

// 단일 대상
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackExports: ["default", "named"] */
  /* webpackFetchPriority: "high" */
  'module'
);

// 여러 가능한 대상
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

import(/* webpackIgnore: true */ 'ignored-module.js');

webpackIgnore

JavaScript Usage

trueë¡œ 설정하면 동적 import 구문 파싱을 비활성화합니다.

import.meta.url을 사용할 ë•Œ, 그대로 유지되지 ì•Šê³ , 대신 baseURI에 따라 대체됩니다. 모듈의 경우 new URL("./", import.meta.url)ë¡œ 대체되고, 다른 경우에는 document.baseURIë¡œ 기본 설정됩니다. 이렇게 하면 기본 URL 컨텍스트에 맞게 상대 URL이 올바르게 작동합니다.

import(/* webpackIgnore: true */ 'ignored-module.js');

new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);

CSS Usage

webpackIgnore 주석은 webpack이 특정 가져오기 또는 URL 참조를 처리할지 여부를 제어할 수 있습니다. 특정 경우에는 바로 사용할 수 있지만 성능상의 이유로 모든 경우를 지원하지는 않습니다.

다음의 경우에는 webpackIgnore를 지원합니다:

@import /* webpackIgnore: false */ url(./basic.css);

.class {
  color: red;
  background: /* webpackIgnore: true */ url('./url/img.png');
}

.class {
  background-image: image-set(
    /*webpackIgnore:  true*/ url(./url/img1x.png) 1x,
    url(./url/img2x.png) 2x,
    url(./url/img3x.png) 3x
  );
}

webpackChunkName

새 청크의 이름입니다. Webpack 2.6.0부터 플레이스홀더 [index]와 [request]는 주어진 문자열 내에서 증가된 숫자 또는 실제 확인된 파일 이름으로 각각 지원합니다. 이 주석을 추가하면 개별 청크 이름이 [id].js 대신 [my-chunk-name].jsë¡œ 지정됩니다.

webpackFetchPriority

특정 동적 import에 대한 fetchPriority를 설정합니다. module.parser.javascript.dynamicImportFetchPriority 옵션을 사용하여 모든 동적 import에 ì „ì—­ 기본값을 설정할 수도 있습니다.

import(
  /* webpackFetchPriority: "high" */
  'path/to/module'
);

webpackMode

Webpack 2.6.0부터 동적 import를 해석하기 위한 다른 모드를 지정할 수 있습니다. 다음 옵션이 지원됩니다.

• 'lazy' (기본값): 각 import()된 모듈에 대해 지연 로드 가능한 청크를 생성합니다.
• 'lazy-once': import()에 대한 모든 호출을 만족시킬 수 있는 단일 지연 로드 가능 청크를 생성합니다. 청크는 import()에 대한 첫 번째 호출에서 가져오고, import()에 대한 후속 호출은 동일한 네트워크 응답을 사용합니다. 이것은 잠재적으로 요청 가능한 복수의 모듈 경로가 있는 import(`./locales/${language}.json`)와 같은 부분 동적 문일 경우에만 의미가 있습니다.
• 'eager': 추가 청크를 생성하지 않습니다. 모든 모듈은 현재 청크에 포함되며 추가 네트워크 요청은 발생하지 않습니다. 이미 해석된 Promiseê°€ 반환됩니다. 정적 가져오기와 달리 모듈은 import()ê°€ 호출될 때까지 실행되지 않습니다.
• 'weak': 모듈 함수가 이미 다른 방식으로 로드된 경우 모듈 로드를 시도합니다(예: 다른 청크가 이를 가져왔거나 모듈을 포함하는 스크립트가 로드된 경우). Promiseê°€ 여전히 반환되지만 청크가 이미 클라이언트에 있는 경우에만 성공적으로 해석됩니다. 모듈을 사용할 수 없으면 Promiseê°€ 거부됩니다. 네트워크 요청은 발생하지 않습니다. 이는 필요한 청크가 초기 요청에서 항상 수동으로 제공되는 (페이지에 내장된 경우) 범용 렌더링에 유용합니다. 하지만 앱 탐색이 초기에 제공되지 않은 가져오기를 트리거 하는 경우에는 유용하지 않습니다.

webpackPrefetch

향후 탐색에 리소스가 필요할 수 있음을 브라우저에 알립니다. webpackPrefetch 작동 방식에 대한 자세한 내용은 가이드를 확인하세요.

webpackPreload

현재 탐색 중에 리소스가 필요할 수 있음을 브라우저에 알립니다. webpackPreload 작동 방식에 대한 자세한 내용은 가이드를 확인하세요.

webpackInclude

가져오기 해석 중 일치하는지 확인할 정규식입니다. 일치하는 모듈만 번들로 제공됩니다.

webpackExclude

가져오기 해석 중 일치하는지 확인할 정규식입니다. 일치하는 모듈은 번들로 제공되지 않습니다.

webpackExports

webpackExports: 동적으로 import()된 모듈의 지정된 내보내기만 번들로 묶도록 webpack에 지시합니다. 청크의 출력 크기를 줄일 수 있습니다. webpack 5.0.0-beta.18부터 사용 가능합니다.

CommonJS

CommonJS의 목표는 브라우저 외부에서 JavaScript용 생태계를 지정하는 것입니다. Webpack에서 지원하는 CommonJS 메서드는 다음과 같습니다.

require

require(dependency: String);

다른 모듈의 내보내기를 동기적으로 검색합니다. 컴파일러는 출력 번들에서 의존성을 사용할 수 있는지 확인합니다.

var $ = require('jquery');
var myModule = require('my-module');

require에 대한 특별한 주석도 활성화할 수 있습니다. 자세한 내용은 module.parser.javascript.commonjsMagicComments를 참고하세요.

require.resolve

require.resolve(dependency: String);

모듈의 ID를 동기적으로 검색합니다. 컴파일러는 출력 번들에서 의존성을 사용할 수 있는지 확인합니다. require.cache[id] 또는 __webpack_require__(id)와 함께 사용할 수 있는 불투명 값으로 처리하는 것이 좋습니다 (이러한 사용을 피하는 것이 가장 좋습니다).

자세한 내용은 module.id를 참고하세요.

require.cache

동일한 모듈을 여러 번 require 하면 모듈이 한 번만 실행되고 하나의 내보내기만 발생합니다. 따라서 런타임에 캐시가 존재합니다. 이 캐시에서 값을 제거하면 새 모듈이 실행되고 새 내보내기가 발생합니다.

var d1 = require('dependency');
require('dependency') === d1;
delete require.cache[require.resolve('dependency')];
require('dependency') !== d1;

// file.js에서
require.cache[module.id] === module;
require('./file.js') === module.exports;
delete require.cache[module.id];
require.cache[module.id] === undefined;
require('./file.js') !== module.exports; // 이론상 실제로 이것은 스택 오버플로를 일으킵니다.
require.cache[module.id] !== module;

require.ensure

require.ensure(
  dependencies: String[],
  callback: function(require),
  errorCallback: function(error),
  chunkName: String
)

비동기식으로 로드될 지정된 dependencies를 별도의 번들로 분할합니다. CommonJS 모듈 구문을 사용할 ë•Œ 이것은 의존성을 동적으로 로드하는 유일한 방법입니다. 즉, 이 코드는 ìž‘ì—… 중에 실행될 수 있으며 특정 조건이 충족되는 경우에만 dependencies를 로드합니다.

var a = require('normal-dep');

if (module.hot) {
  require.ensure(['b'], function (require) {
    var c = require('c');

    // 특별한 작업을 수행...
  });
}

다음 파라미터는 위에서 지정한 순서대로 지원됩니다.

• dependencies: callback의 코드 실행에 필요한 모든 모듈을 선언하는 문자열 배열입니다.
• callback: 의존성이 로드되면 webpack이 실행할 함수입니다. require 함수 구현은 이 함수에 대한 파라미터로 전송됩니다. 함수 본문은 이것을 사용하여 실행에 필요한 추가 require() 모듈을 사용할 수 있습니다.
• errorCallback: Webpack이 의존성을 불러오지 못했을 ë•Œ 실행되는 함수입니다.
• chunkName: 특별히 이 require.ensure()에 의해 생성된 청크에 부여된 이름입니다. 다양한 require.ensure() 호출에 동일한 chunkName을 전달하면 해당 코드를 단일 청크로 ê²°í•©í•  수 있으므로 브라우저에서 로드하는 번들이 하나만 생성됩니다.

AMD

AMD(Asynchronous Module Definition)는 모듈을 작성하고 로드하기 위한 인터페이스를 정의하는 JavaScript 사양입니다. Webpack에서 지원하는 AMD 방식은 다음과 같습니다.

define (with factory)

define([name: String], [dependencies: String[]], factoryMethod: function(...))

dependenciesê°€ 제공되면 factoryMethodê°€ 각 의존성의 내보내기와 함께 같은 순서로 호출됩니다. dependenciesê°€ 제공되지 않으면 factoryMethodê°€ require, exports 및 moduleê³¼ 함께 호출됩니다(호환성을 위함입니다!). 이 함수가 값을 반환하면 모듈에서 이 값을 내보냅니다. 컴파일러는 각 의존성을 사용할 수 있는지 확인합니다.

define(['jquery', 'my-module'], function ($, myModule) {
  // $와 myModule로 작업을 수행하세요...

  // 함수 내보내기
  return function doSomething() {
    // ...
  };
});

define (with value)

define(value: !Function)

제공된 value를 내보냅니다. 여기서 value는 함수를 제외한 모든 것이 될 수 있습니다.

define({
  answer: 42,
});

require (amd-version)

require(dependencies: String[], [callback: function(...)])

require.ensure와 유사하게, 주어진 dependencies를 비동기식으로 로드되는 별도의 번들로 분할합니다. callback은 dependencies 배열의 각 종속성을 내보낼 ë•Œ 호출됩니다.

require(['b'], function (b) {
  var c = require('c');
});

Labeled Modules

내부 LabeledModulesPlugin을 통해 모듈 내에서 다음과 같은 내보내기 및 요청을 위한 메서드 사용이 가능합니다.

export label

제공된 value를 내보냅니다. label은 함수 선언이나 변수 ì„ ì–¸ 앞에 올 수 있습니다. 함수 이름 또는 변수 이름은 값을 내보내는 데 사용되는 식별자입니다.

export: var answer = 42;
export: function method(value) {
  // 작업을 수행하세요...
};

require label

현재 범위에서 사용 가능한 의존성의 모든 내보내기를 만듭니다. require label은 문자열 앞에 올 수 있습니다. 의존성은 export label이 있는 값을 내보내야 합니다. CommonJS 또는 AMD 모듈은 사용할 수 없습니다.

some-dependency.js

export: var answer = 42;
export: function method(value) {
  // 작업을 수행하세요...
};

require: 'some-dependency';
console.log(answer);
method(...);

Webpack

위에서 설명한 모듈 구문 외에도 webpack에 한정된 몇가지 사용자 정의 메서드를 허용합니다.

require.context

require.context(
  (directory: String),
  (includeSubdirs: Boolean) /* 선택, 기본값 true */,
  (filter: RegExp) /* 선택, 기본값 /^\.\/.*$/, 모든 파일 */,
  (mode: String) /* 선택, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', 기본값 'sync' */
);

directory에 대한 경로, includeSubdirs 옵션, 포함된 모듈을 좀 더 세밀하게 제어하기 위한 filter, 로드 작동 방식을 정의하는 mode를 사용하여 ì „ì²´ 의존성 그룹을 지정합니다. 그러면 기본 모듈은 나중에 해석할 수 있습니다.

var context = require.context('components', true, /\.html$/);
var componentA = context.resolve('componentA');

modeê°€ 'lazy'ë¡œ 설정되면 기본 모듈이 비동기식으로 로드됩니다.

var context = require.context('locales', true, /\.json$/, 'lazy');
context('localeA').then((locale) => {
  // locale로 작업을 수행
});

사용 가능한 모드의 ì „ì²´ 목록과 ê·¸ 동작은 import() 문서에 설명되어 있습니다.

require.include

require.include((dependency: String));

실행하지 ì•Šê³  dependency를 포함합니다. 출력 청크에서 모듈의 위치를 최적화하는 데 사용할 수 있습니다.

require.include('a');
require.ensure(['a', 'b'], function (require) {
  /* ... */
});
require.ensure(['a', 'c'], function (require) {
  /* ... */
});

결과는 다음과 같습니다.

• 엔트리 청크: file.js 와 a
• 익명 청크: b
• 익명 청크: c

require.include('a')ê°€ 없으면 두 익명 청크에 복제됩니다.

require.resolveWeak

require.resolve와 유사하지만, module을 번들로 가져오지 않습니다. 이것은 "약한" 의존성으로 간주합니다.

if (__webpack_modules__[require.resolveWeak('module')]) {
  // 모듈을 사용할 수 있을 때 수행...
}
if (require.cache[require.resolveWeak('module')]) {
  // 이전에 모듈이 로드된 경우 수행...
}

// 동적 해석("context")을 수행할 수 있습니다.
// 다른 require/import 메서드와 유사합니다.
const page = 'Foo';
__webpack_modules__[require.resolveWeak(`./page/${page}`)];

warning

모듈 소스에 정적으로 분석할 수 없는 요구 사항이 포함되어 있으면, 중요한 종속성 경고가 표시됩니다.

예제 코드:

someFn(require);
require.bind(null);
require(variable);