Module | Webpack

이 옵션은 프로젝트 내에서 다른 유형의 모듈을 처리하는 방법을 결정합니다.
모듈에 기본적으로 적용되는 규칙의 배열입니다.
자세한 내용은 소스 코드를 참고하세요.
Webpack 5.87.0부터 0, "", false, null 및 undefined를 포함한 falsy 값을 module.defaultRules로 전달하여 특정 규칙을 조건부로 비활성화할 수 있습니다.
module.generator를 사용하여 한 곳에서 모든 제너레이터의 옵션을 설정할 수 있습니다.
exportsConvention이 함수인 경우 string 또는 string[]를 반환할 수 있습니다. 배열을 반환하면 배열에 포함된 모든 이름으로 local class를 export하며, 이는 css-loader의 동작과 일치합니다. 같은 class를 여러 alias로 노출하고 싶지만 두 개의 rule을 작성하고 싶지 않을 때 유용합니다.
스타일시트 생성 및 로드를 건너뛰고 CSS 모듈의 내보내기(로컬 클래스 이름에서 생성된 이름으로의 매핑)만 JavaScript 출력에 포함합니다. 이는 스타일이 클라이언트 빌드에서 제공되고 서버는 이름만 필요한 서버 사이드 빌드에 적합합니다.
CSS 모듈의 내보내기를 ES 모듈 구문으로 생성하여 트리 쉐이킹과 연결이 가능하도록 합니다. CommonJS 내보내기를 출력하려면 false로 설정하세요.
boolean = true 'inline'
HTML 모듈이 파싱되고 URL이 재작성된 HTML을 모듈의 JavaScript export와 함께 독립 실행형 .html 출력 파일로 생성할지 여부를 제어합니다. CSS 추출 파이프라인을 미러링합니다. experiments.html이 필요합니다.
설정하지 않으면, 컴파일 엔트리로 사용되는 HTML 모듈(HTML 엔트리 포인트)에 대해서는 기본적으로 true이고, JavaScript에서 import된 HTML 모듈에 대해서는 false입니다. 생성되는 파일명은 output.htmlFilename 및 output.htmlChunkFilename을 따릅니다.
module.generator처럼 module.parser를 사용하여 한 곳에서 모든 파서의 옵션을 설정할 수 있습니다.
CSS 파서에 대한 옵션을 설정합니다.
이 옵션은 CSS 파일에서 @import at-rules를 처리할 수 있도록 합니다. true로 설정하면 @import 문이 처리되어 다른 CSS 파일에서 스타일을 모듈식으로 포함할 수 있습니다.
특정 가져오기를 필터링하려면 Webpack의 기본 제공 IgnorePlugin을 사용할 수 있습니다. css-loader에서 사용 가능한 filter 옵션은 지원되지 않습니다.
이 옵션은 CSS 파일 내 url(), image-set(), src(), image()와 같은 함수에서 URL 처리를 활성화 또는 비활성화합니다. 활성화하면 이러한 URL은 WebPack에서 확인 및 처리됩니다.
특정 가져오기를 필터링하려면 Webpack의 내장 IgnorePlugin을 사용할 수 있습니다. css-loader에서 제공되는 filter 옵션은 지원되지 않습니다.
이 옵션을 사용하면 CSS 내보내기에 export라는 이름의 ES 모듈을 사용할 수 있습니다. true로 설정하면 CSS 모듈은 이름이 지정된 내보내기를 사용하여 클래스와 스타일을 내보냅니다.
CSS 모듈에 대해 namedExports가 false인 경우 다양한 가져오기 방법을 사용하여 CSS 클래스를 검색할 수 있습니다. 이름이 지정된은 내보내기는 개발자 환경(DX)을 개선하기 위해 리디렉션되어 기본 내보내기에서 이름이 지정된 내보내기로 원활하게 전환할 수 있습니다.
namedExports가 활성화되면(기본 동작) 이름이 지정된 내보내기만 사용하여 CSS 클래스를 가져올 수 있습니다.
namedExports를 활성화하면 JavaScript 프로젝트에서 CSS를 관리하는 데 더 모듈화되고 유지 관리 가능한 접근 방식을 채택하고 ES 모듈 구문을 활용하여 더 명확하고 명시적인 가져오기를 수행할 수 있습니다.
CSS Modules에 대해 엄격한 pure mode를 활성화합니다. 모든 selector는 최소 하나의 local class 또는 id selector를 포함해야 하며, 그렇지 않으면 webpack이 build error를 발생시킵니다. 이는 postcss-modules-local-by-default의 pure mode와 동일한 동작이며, 실수로 작성한 global selector를 초기에 발견하는 데 도움이 됩니다.
필요할 때는 두 가지 주석으로 이 검사를 비활성화할 수 있습니다.
/* cssmodules-pure-ignore */를 rule 바로 앞에 두면 해당 rule 하나에 대해서만 검사가 비활성화됩니다. 이 비활성화는 rule 단위로만 적용되며 하위 항목으로 전파되지 않습니다.
/* cssmodules-pure-no-check */를 파일 선두의 주석 영역(어떤 rule보다도 앞)에 두면 파일 전체에 대한 검사가 비활성화됩니다.
일부 구문은 설계상 검사 예외입니다. local selector를 포함한 상위 selector 내부의 nested rules는 pure-compliant로 간주되고, &는 부모 rule의 purity를 따르며, @keyframes와 @counter-style의 본문은 검사하지 않습니다.
CSS 모듈에서 @keyframes 애니메이션 이름 변경 기능을 활성화 또는 비활성화합니다. css/auto, css/module 및 css/global 모듈 타입에서만 사용 가능합니다.
CSS 모듈에서 @container 이름 변경을 활성화 또는 비활성화합니다. css/auto, css/module 및 css/global 모듈 타입에서만 사용 가능합니다.
CSS 모듈에서 사용자 지정 식별자의 이름 변경을 활성화 또는 비활성화합니다. css/auto, css/module 및 css/global 모듈 타입에서만 사용 가능합니다.
webpack 5.109.0부터는 view-transition-name / view-transition-group / view-transition-class 이름과 ::view-transition-*() pseudo-element 참조에도 scope를 적용합니다.
native CSS에서 @custom-media at-rule의 resolution을 활성화하거나 비활성화합니다. 이는 file-local build-time substitution입니다. media-type 값도 지원됩니다.
native CSS에서 @custom-selector at-rule의 resolution을 활성화하거나 비활성화합니다. 이는 :is(...)로 확장되는 file-local build-time expansion입니다.
CSS 사용자 지정 속성(예: --my-variable)과 같은 하이픈으로 구분된 식별자의 이름 변경을 활성화 또는 비활성화합니다. css/auto, css/module 및 css/global 모듈 타입에서만 사용 가능합니다.
CSS 모듈에서 @function 이름 변경을 활성화 또는 비활성화합니다. css/auto, css/module 및 css/global 모듈 타입에서만 사용 가능합니다.
HTML entry의 initial CSS에서 도달할 수 있는 각 @font-face의 primary src URL에 대해 <link rel="preload" as="font">를 자동 emit합니다. 모든 format을 preload하면 중복 다운로드가 발생하므로 @font-face마다 첫 번째 URL만 preload됩니다. module.parser.css.urlHints rule과 URL별 magic comment는 여전히 seed된 기본값을 override합니다.
font의 preload link는 font의 CORS fetch와 일치해야 하므로 output.crossOriginLoading을 그에 맞게 설정하세요.
CSS의 url(...)을 통해 참조되는 asset에 대한 기본 resource-hint rule입니다. module.parser.javascript.urlHints와 같은 rule 형식을 사용합니다.
CSS 모듈에서 그리드 식별자 이름 변경 기능을 활성화 또는 비활성화합니다. css/auto, css/module 및 css/global 모듈 타입에서만 사용 가능합니다.
CSS 콘텐츠를 내보내는 방법을 설정합니다.
Type: 'link' | 'text' | 'css-style-sheet' | 'style'