이 옵션은 프로젝트 내에서 다른 유형의 모듈을 처리하는 방법을 결정합니다.
모듈에 기본적으로 적용되는 규칙의 배열입니다.
자세한 내용은 소스 코드를 참고하세요.
module.exports = {
module: {
defaultRules: [
'...', // "..."를 사용하여 기본적으로 webpack에 의해 적용되는 규칙을 참조할 수 있습니다.
],
},
};
Webpack 5.87.0부터 0
, ""
, false
, null
및 undefined
를 포함한 falsy 값을 module.defaultRules
로 전달하여 특정 규칙을 조건부로 비활성화할 수 있습니다.
module.exports = {
module: {
defaultRules: [
false &&
{
// 이 규칙은 비활성화됩니다.
},
],
},
};
module.generator
를 사용하여 한 곳에서 모든 제너레이터의 옵션을 설정할 수 있습니다.
webpack.config.js
module.exports = {
module: {
generator: {
asset: {
// asset 모듈 제너레이터 옵션
// 이 애셋을 바이너리로 처리해야 하는지 여부를 나타냅니다. 대신 텍스트로 처리하려면 'false'로 설정합니다. webpack 5.93.0부터 사용 가능합니다.
binary: false,
// 데이터 URL 제너레이터 옵션입니다.
dataUrl: {
// 애셋 인코딩(기본값은 "base64")
// type: 'base64' | false
encoding: 'base64',
// 애셋 Mimetype (기본적으로 파일 확장자에서 가져옵니다).
// type: string
mimetype: 'image/png',
},
// 이 애셋 모듈에서 출력 애셋을 내보냅니다. 예를 들어 SSR의 경우 내보내기를 생략하려면 'false'로 설정할 수 있습니다.
// type: boolean
emit: true,
// 이 애셋 모듈의 파일 이름을 사용자 정의합니다.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
filename: 'static/[path][name][ext]',
// asset 모듈을 위한 publicPath 사용자 정의. webpack 5.28.0 이후로 사용 가능.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
publicPath: 'https://cdn/assets/',
// Webpack 5.67.0부터 사용 가능한 'output.path'를 기준으로 지정된 폴더의 애셋을 내보냅니다.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
outputPath: 'cdn-assets/',
},
'asset/inline': {
// asset/inline 모듈 제너레이터 옵션
// 이 애셋을 바이너리로 처리해야 하는지 여부를 나타냅니다. 대신 텍스트로 처리하려면 'false'로 설정합니다. webpack 5.93.0부터 사용 가능합니다.
binary: false,
// 데이터 URL 제너레이터 옵션
dataUrl: {
// 애셋 인코딩(기본값은 "base64")
// type: 'base64' | false
encoding: 'base64',
// 애셋 Mimetype (기본적으로 파일 확장자에서 가져옵니다).
// type: string
mimetype: 'image/png',
},
},
'asset/resource': {
// asset/resource 모듈 제너레이터 옵션
// 이 애셋을 바이너리로 처리해야 하는지 여부를 나타냅니다. 대신 텍스트로 처리하려면 'false'로 설정합니다. webpack 5.93.0부터 사용 가능합니다.
binary: false,
// 이 애셋 모듈에서 출력 애셋을 내보냅니다. 예를 들어 SSR의 경우 내보내기를 생략하려면 'false'로 설정할 수 있습니다.
// type: boolean
emit: true,
// 이 애셋 모듈의 파일 이름을 사용자 정의합니다.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
filename: 'static/[path][name][ext]',
// asset/resource 모듈을 위한 publicPath 사용자 정의. webpack 5.28.0 이후로 사용 가능.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
publicPath: 'https://cdn/assets/',
// Webpack 5.67.0부터 사용 가능한 'output.path'를 기준으로 지정된 폴더의 애셋을 내보냅니다.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
outputPath: 'cdn-assets/',
},
javascript: {
// 이 모듈 유형에는 아직 제너레이터 옵션이 지원되지 않습니다.
},
'javascript/auto': {
// 위와 동일
},
'javascript/dynamic': {
// 위와 동일
},
'javascript/esm': {
// 위와 동일
},
css: {
// CSS 모듈용 제너레이터 옵션
// 스타일시트를 생성하고 로드하는 것을 피하고 출력 자바스크립트 파일에 css의 내보내기만 포함합니다.
// type: boolean, webpack 5.90.0부터 사용 가능합니다.
exportsOnly: true,
// CSS 내보내기 이름을 그대로 유지하거나 카멜 케이스로 변환하는 등 javascript 모듈로 내보내는 방법을 사용자 정의합니다.
// type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string)
// webpack 5.90.4부터 사용 가능합니다.
exportsConvention: 'camel-case-only',
},
'css/auto': {
// CSS/자동 모듈 생성용 옵션
// 스타일시트를 생성하고 로드하는 것을 피하고 출력 자바스크립트 파일에 css의 내보내기만 포함합니다.
// type: boolean, webpack 5.90.0부터 사용 가능합니다.
exportsOnly: true,
// CSS 내보내기 이름을 그대로 유지하거나 카멜 케이스로 변환하는 등 javascript 모듈로 내보내는 방법을 사용자 정의합니다.
// type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string)
// webpack 5.90.4부터 사용 가능합니다.
exportsConvention: 'camel-case-only',
// CSS 모듈에 대해 생성된 로컬 클래스 이름의 형식을 사용자 정의합니다.
// type: string, https://webpack.js.org/configuration/output/#template-strings의 파일 수준 및 모듈 수준 대체 외에도 [uniqueName] 및 [local]도 포함됩니다.
// webpack 5.90.4부터 사용 가능합니다.
localIdentName: '[uniqueName]-[id]-[local]',
},
'css/global': {
// ditto
},
'css/module': {
// ditto
},
// 그외 다른 옵션들…
},
},
};
module.generator
처럼 module.parser
를 사용하여 한 곳에서 모든 파서의 옵션을 설정할 수 있습니다.
webpack.config.js
module.exports = {
module: {
parser: {
asset: {
// asset 모듈 파서 옵션
// 데이터 URL 제너레이터 옵션입니다.
dataUrl: {
// 애셋 인코딩(기본값은 "base64")
// type: 'base64' | false
encoding: 'base64',
// 애셋 Mimetype (기본적으로 파일 확장자에서 가져옵니다).
// type: string
mimetype: 'image/png',
},
// 이 애셋 모듈에서 출력 애셋을 내보냅니다. 예를 들어 SSR의 경우 내보내기를 생략하려면 'false'로 설정할 수 있습니다.
// type: boolean
emit: true,
// 이 애셋 모듈의 파일 이름을 사용자 정의합니다.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
filename: 'static/[path][name][ext]',
// asset 모듈을 위한 publicPath 사용자 정의. webpack 5.28.0 이후로 사용 가능.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
publicPath: 'https://cdn/assets/',
// Webpack 5.67.0부터 사용 가능한 'output.path'를 기준으로 지정된 폴더의 애셋을 내보냅니다.
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
outputPath: 'cdn-assets/',
},
'asset/inline': {
// 이 모듈 유형에는 아직 파서 옵션이 지원되지 않습니다.
},
'asset/resource': {
// 위와 동일
},
'asset/source': {
// 위와 동일
},
javascript: {
// javascript 모듈 파서 옵션
// 예. require.ensure 구문 파싱 활성화
requireEnsure: true,
// 모듈을 '엄격' 또는 '비엄격' 모드로 설정합니다. 엄격 모드와 비엄격 모드 간에 일부 동작이 다르기 때문에 이는 모듈의 동작에 영향을 미칠 수 있습니다.
overrideStrict: 'non-strict',
},
'javascript/auto': {
// 위와 동일
},
'javascript/dynamic': {
// 위와 동일
},
'javascript/esm': {
// 위와 동일
},
css: {
// CSS 모듈의 파서 옵션
// Webpack 5.90.0부터 사용할 수 있는 CSS 내보내기를 위해 export라는 이름의 ES 모듈을 사용하세요.
// type: boolean
namedExports: true,
},
'css/auto': {
// 위와 동일
},
'css/global': {
// 위와 동일
},
'css/module': {
// 위와 동일
},
// 그외 다른 옵션들…
},
},
};
이 옵션을 사용하면 CSS 내보내기에 export라는 이름의 ES 모듈을 사용할 수 있습니다. true로 설정하면 CSS 모듈은 이름이 지정된 내보내기를 사용하여 클래스와 스타일을 내보냅니다.
Type: boolean
Available: 5.90.0+
Example:
module.exports = {
module: {
parser: {
css: {
namedExports: true,
},
},
},
};
CSS 모듈에 대해 namedExports
가 false
인 경우 다양한 가져오기 방법을 사용하여 CSS 클래스를 검색할 수 있습니다.
이름이 지정된은 내보내기는 개발자 환경(DX)을 개선하기 위해 리디렉션되어 기본 내보내기에서 이름이 지정된 내보내기로 원활하게 전환할 수 있습니다.
import * as styles from './styles.module.css';
import styles1 from './styles.module.css';
import { foo } from './styles.module.css';
console.log(styles.default.foo); // styles.default를 통해 접근
console.log(styles.foo); // styles에서 직접 접근
console.log(styles1.foo); // 기본 가져오기를 통해 styles1에 접근
console.log(foo); // 바로 명명된 이름으로 가져오기
namedExports
가 활성화되면(기본 동작) 이름이 지정된 내보내기만 사용하여 CSS 클래스를 가져올 수 있습니다.
/* styles.css */
.header {
color: blue;
}
.footer {
color: green;
}
import { header, footer } from './styles.module.css';
namedExports
를 활성화하면 JavaScript 프로젝트에서 CSS를 관리하는 데 더 모듈화되고 유지 관리 가능한 접근 방식을 채택하고 ES 모듈 구문을 활용하여 더 명확하고 명시적인 가져오기를 수행할 수 있습니다.
JavaScript 파서를 위한 옵션을 설정할 수 있습니다.
module.exports = {
module: {
parser: {
javascript: {
// ...
commonjsMagicComments: true,
},
},
},
};
Rule.parser
에서 이러한 옵션을 설정하고 특정 모듈을 대상으로 지정할 수 있습니다.
CommonJS를 위해 magic comments 지원을 활성화할 수 있습니다.
타입: boolean
가능한 버전: 5.17.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
commonjsMagicComments: true,
},
},
},
};
webpackIgnore
주석만 지원됩니다.
const x = require(/* webpackIgnore: true */ 'x');
동적 import를 위해 전역 fetchPriority를 지정합니다.
타입: 'low' | 'high' | 'auto' | false
가능한 버전: 5.87.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
dynamicImportFetchPriority: 'high',
},
},
},
};
동적 import를 위한 전역 프리로드를 지정합니다.
타입: 'eager' | 'weak' | 'lazy' | 'lazy-once'
가능한 버전: 5.73.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
dynamicImportMode: 'lazy',
},
},
},
};
동적 import를 위한 전역 프리로드를 지정합니다.
타입: number | boolean
가능한 버전: 5.73.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
dynamicImportPrefetch: false,
},
},
},
};
동적 import를 위한 전역 프리로드를 지정합니다.
타입: number | boolean
가능한 버전: 5.73.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
dynamicImportPreload: false,
},
},
},
};
\"import ... from ...\"
와 \"export ... from ...\"
에서 내보내기 이름이 잘못된 경우의 동작을 지정합니다.
타입: 'error' | 'warn' | 'auto' | false
가능한 버전: 5.62.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
exportsPresence: 'error',
},
},
},
};
\"import ... from ...\"
에서 내보내기 이름이 잘못된 경우의 동작을 지정합니다.
타입: 'error' | 'warn' | 'auto' | false
가능한 버전: 5.62.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
importExportsPresence: 'error',
},
},
},
};
import.meta
평가를 활성화 또는 비활성화합니다.
타입: boolean = true
가능한 버전: 5.68.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
importMeta: false,
},
},
},
};
import.meta.webpackContext
평가를 사용하거나 사용하지 않도록 설정합니다.
타입: boolean
가능한 버전: 5.70.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
importMetaContext: true,
},
},
},
};
모듈을 '엄격' 또는 '비엄격' 모드로 설정합니다. 엄격 모드와 비엄격 모드 간에 일부 동작이 다르기 때문에 이는 모듈의 동작에 영향을 미칠 수 있습니다.
Type: 'strict' | 'non-strict'
Available: 5.93.0+
Example:
module.exports = {
module: {
parser: {
javascript: {
overrideStrict: 'non-strict',
},
},
},
};
\"export ... from ...\"
에서 내보내기 이름이 잘못된 경우의 동작을 지정합니다. 이것은 TypeScript에서 타입을 다시 내보낼때 \"export ... from ...\"
에서 \"export type ... from ...\"
으로 마이그레이션하는 동안 비활성화하는 데 유용합니다.
타입: 'error' | 'warn' | 'auto' | false
가능한 버전: 5.62.0+
예제:
module.exports = {
module: {
parser: {
javascript: {
reexportExportsPresence: 'error',
},
},
},
};
new URL()
구문 파싱을 활성화합니다.
타입: boolean = true
| 'relative'
예제:
module.exports = {
module: {
parser: {
javascript: {
url: false, // `new URL()` 구문 파싱 비활성화
},
},
},
};
module.parser.javascript.url
의 'relative'
값은 webpack 5.23.0부터 사용할 수 있습니다. 사용하면 webpack은 new URL()
구문에 대한 상대경로 URL을 생성합니다. 즉, 결과 URL 기준 URL이 포함되지 않습니다.
<!-- 'relative'인 경우 -->
<img src="c43188443804f1b1f534.svg" />
<!-- 'relative'가 아닌 경우 -->
<img src="file:///path/to/project/dist/c43188443804f1b1f534.svg" />
RegExp
[RegExp]
function(resource)
string
[string]
webpack이 주어진 정규식과 일치하는 파일을 파싱하지 못하도록 합니다. 제외된 파일에는 import
, require
, define
또는 기타 import 메커니즘의 호출이 없어야 합니다. 이렇게 하면 큰 라이브러리를 무시할 때 빌드 성능을 향상 시킬 수 있습니다.
'noParse'는 모든 'import', 'require', 'define' 등의 호출이 런타임에서 도달할 수 없는 경우 확장을 의도적으로 방지하는 방법으로도 사용할 수 있습니다.
예를 들어 '브라우저' 대상용 프로젝트를 빌드하고 브라우저와 Node.js 모두에 대해 사전 빌드된 타사 라이브러리를 사용할 때, 예를 들면 require('os')
와 같은 Node.js의 내장 기능이 필요합니다.
webpack.config.js
module.exports = {
//...
module: {
noParse: /jquery|lodash|src[\\/]vendor[\\/]somelib/,
},
};
module.exports = {
//...
module: {
noParse: (content) =>
/jquery|lodash|src[\\/]vendor[\\/]somelib/.test(content),
},
};
boolean
function (module)
모듈 요청에 대한 해석을 캐시합니다. module.unsafeCache
에 대한 몇 가지 기본값이 있습니다.
webpack.config.js
module.exports = {
//...
module: {
unsafeCache: false,
},
};
(Rule | undefined | null | false | "" | 0 | "...")[]
모듈이 생성 될 때 요청과 일치하는 Rule의 배열입니다. 이러한 규칙은 모듈 생성 방법을 수정할 수 있습니다. 로더를 모듈에 적용시키거나 파서를 수정할 수 있습니다.
Webpack 5.87.0부터 false
, undefined
, null
및 0
과 같은 falsy 값을 사용하여 조건부로 규칙을 비활성화할 수 있습니다.
object
Rule은 Conditions, Results 그리고 중첩된 Rules 세 부분으로 나눠질 수 있습니다.
conditions에 대한 두가지 입력 값이 있습니다.
resource: 요청된 파일의 절대 경로입니다. resolve
규칙에 따라 이미 해석되었습니다.
issuer: resource를 요청한 모듈의 파일에 대한 절대 경로입니다. import하는 위치입니다.
예: app.js
내에서 import './style.css'
를 수행할 때, resource는 /path/to/style.css
이고 issuer는 /path/to/app.js
입니다.
Rule의 test
, include
, exclude
그리고 resource
프로퍼티가 resource와 일치하고 issuer
프로퍼티가 issuer와 일치합니다.
여러 조건을 사용하는 경우, 모든 조건이 일치해야 합니다.
Rule results는 Rule condition이 일치하는 경우에만 사용됩니다.
Rule에는 두 가지 출력 값이 있습니다.
loader
, options
, use
프로퍼티는 로더에 영향을 줍니다.
query
, loaders
프로퍼티는 호환성을 위해 존재합니다.
enforce
프로퍼티는 일반, 사전 또는 사후 로더인지에 따라서 로더의 범주에 영향을 줍니다.
parser
프로퍼티는 파서 옵션에 영향을 줍니다.
중첩된 rules은 rules
, oneOf
프로퍼티에서 지정할 수 있습니다.
이러한 rule은 상위 Rule condition이 일치하는 경우에만 평가됩니다. 각 중첩 rule은 자체적으로 조건을 포함 할 수 있습니다.
평가의 순서는 다음과 같습니다.
string
가능한 값: 'pre' | 'post'
로더의 범주를 지정합니다. 값이 없으면 일반 로더를 의미합니다.
추가적으로 import/require의 인라인으로 적용된 "인라인 로더"도 있습니다.
모든 로더가 차례로 통과하는 두 단계가 있습니다.
post, inline, normal, pre
순서로 호출됩니다. 자세한 내용은 Pitching Loader를 참고하세요.pre, normal, inline, post
순서로 호출됩니다. 모듈의 소스 코드에서 변환이 이 단계에서 발생합니다.모든 일반 로더는 요청에 !
를 접두사로 추가하여 생략(재정의) 할 수 있습니다.
모든 일반 및 사전 로더는 요청에 -!
를 접두사로 추가하여 생략(재정의) 할 수 있습니다.
모든 일반, 사후 및 사전 로더는 요청에 !!
를 접두사로 추가하여 생략(재정의) 할 수 있습니다.
// 일반 로더 비활성화
import { a } from '!./file1.js';
// 사전, 일반 로더 비활성화
import { b } from '-!./file2.js';
// 모든 로더 비활성화
import { c } from '!!./file3.js';
인라인 로더와 !
접두사는 비표준이므로 사용해서는 안됩니다. 이것들은 로더가 생성한 코드에서 사용할 수 있습니다.
조건과 일치하는 모든 모듈을 제외합니다. Rule.exclude
옵션을 사용하면 Rule.resource
옵션을 사용할 수 없습니다. 자세한 내용은 Rule.resource
및 Condition.exclude
를 참고하세요.
조건과 일치하는 모든 모듈을 포함합니다. Rule.include
옵션을 사용하면 Rule.resource
옵션을 사용할 수 없습니다. 자세한 내용은 Rule.resource
및 Condition.include
를 참고하세요.
요청한 모듈과 비교할 Condition
입니다. 아래의 예제에서, a.js
의 issuer
는 index.js
파일의 경로입니다.
index.js
import A from './a.js';
이 옵션은 특정 모듈 또는 모듈 세트의 디펜던시에 로더를 적용하는 데 사용할 수 있습니다.
issuer의 계층별로 필터링하고 일치시킬 수 있습니다.
webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
issuerLayer: 'other-layer',
},
],
},
};
string
모듈이 배치되어야 하는 계층을 지정합니다. 모듈 그룹은 분할 청크, 통계 또는 엔트리 옵션에서 사용할 수 있는 하나의 레이어로 통합될 수 있습니다.
webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /module-layer-change/,
layer: 'layer',
},
],
},
};
Rule.loader
는 Rule.use: [ { loader } ]
의 단축어입니다. 자세한 내용은 Rule.use
와 UseEntry.loader
를 참고하세요.
Rule.loaders
는 Rule.use
의 별칭입니다. 자세한 내용은 Rule.use
를 참고하세요.
mimetype
을 사용하여 설정 규칙을 데이터 URI에 일치시킬 수 있습니다.
webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
mimetype: 'application/json',
type: 'json',
},
],
},
};
application/json
, text/javascript
, application/javascript
, application/node
및 application/wasm
은 이미 기본적인 mimetype으로 포함되어 있습니다.
Rule이 일치할 때 첫 번째 일치하는 Rule만 사용되는 Rules
의 배열입니다.
webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/,
oneOf: [
{
resourceQuery: /inline/, // foo.css?inline
type: 'asset/inline',
},
{
resourceQuery: /external/, // foo.css?external
type: 'asset/resource',
},
],
},
],
},
};
Rule.options
과 Rule.query
는 Rule.use: [ { options } ]
의 단축어입니다. 자세한 내용은 Rule.use
와 UseEntry.options
을 참고하세요.
파서 옵션이 있는 객체입니다. 적용된 모든 파서 옵션이 병합됩니다.
파서는 이러한 옵션을 검사하고 그에 따라 자체적으로 비활성화하거나 재구성할 수 있습니다. 대부분의 기본 플러그인은 값을 다음과 같이 해석합니다.
false
로 설정하면 파서가 비활성화됩니다.true
로 설정하거나 undefined
로 두면 파서가 활성화됩니다.그러나, 파서 플러그인은 boolean 이상의 값을 받아들일 수 있습니다. 예를 들면, 내부의 NodeStuffPlugin
은 true
대신에 객체를 받아 특정 Rule에 대한 옵션을 추가할 수 있습니다.
예제 (기본 플러그인의 파서 옵션):
module.exports = {
//...
module: {
rules: [
{
//...
parser: {
amd: false, // AMD 비활성화
commonjs: false, // CommonJS 비활성화
system: false, // SystemJS 비활성화
harmony: false, // ES2015 Harmony import/export 비활성화
requireInclude: false, // require.include 비활성화
requireEnsure: false, // require.ensure 비활성화
requireContext: false, // require.context 비활성화
browserify: false, // Browserify 번들의 특수 처리 비활성화
requireJs: false, // requirejs.* 비활성화
node: false, // __dirname, __filename, module, require.extensions, require.main, 등 비활성화
commonjsMagicComments: false, // CommonJS를 위한 magic comments 지원 비활성화
node: {}, // 모듈 수준에서 [node](/configuration/node) 계층 재구성
worker: ['default from web-worker', '...'], // javascript 파일에 대한 WebWorker 처리를 커스터마이즈합니다. "..."는 기본값을 나타냅니다.
},
},
],
},
};
Rule.type
이 asset
이면 Rules.parser
옵션은 파일 내용을 Base64로 인코딩할지 또는 별도의 파일로 출력 디렉터리에 내보낼 지 여부를 나타내는 조건을 설명하는 객체 또는 함수일 수 있습니다.
Rule.type
이 asset
또는 asset/inline
인 경우 Rule.generator
옵션은 모듈 소스의 인코딩을 설명하는 객체이거나 사용자 지정 알고리즘으로 모듈의 소스를 인코딩하는 함수일 수 있습니다.
추가적인 정보나 사용 사례를 위해 애셋 모듈 가이드를 참고하세요.
object = { maxSize number = 8096 }
function (source, { filename, module }) => boolean
모듈 소스 크기가 maxSize
보다 작으면 모듈이 Base64 인코딩 문자열로 번들에 삽입되고, 그렇지 않으면 모듈 파일이 출력 디렉터리로 내보내집니다.
webpack.config.js
module.exports = {
//...
module: {
rules: [
{
//...
parser: {
dataUrlCondition: {
maxSize: 4 * 1024,
},
},
},
],
},
};
함수를 dataUrlCondition의 값으로 설정한 경우에는 true
를 반환하면 webpack이 모듈을 Base64 인코딩 문자열로 번들에 삽입하도록 지시합니다. 그렇지 않으면 모듈 파일이 출력 디렉터리로 내보내집니다.
webpack.config.js
module.exports = {
//...
module: {
rules: [
{
//...
parser: {
dataUrlCondition: (source, { filename, module }) => {
const content = source.toString();
return content.includes('some marker');
},
},
},
],
},
};
object = { encoding string = 'base64' | false, mimetype string = undefined | false }
function (content, { filename, module }) => string
Rule.generator.dataUrl
이 객체로 사용되면 두개의 프로퍼티를 설정할 수 있습니다.
'base64'
로 설정하면 모듈 소스는 Base64 알고리즘을 사용하여 인코딩됩니다. encoding
을 false로 설정하면 인코딩이 비활성화됩니다.webpack.config.js
module.exports = {
//...
module: {
rules: [
{
//...
generator: {
dataUrl: {
encoding: 'base64',
mimetype: 'mimetype/png',
},
},
},
],
},
};
함수로 사용하면 모든 모듈에 대해 실행되며 데이터 URI 문자열을 반환해야 합니다.
module.exports = {
//...
module: {
rules: [
{
//...
generator: {
dataUrl: (content) => {
const svgToMiniDataURI = require('mini-svg-data-uri');
if (typeof content !== 'string') {
content = content.toString();
}
return svgToMiniDataURI(content);
},
},
},
],
},
};
애셋 모듈에서 애셋 쓰기를 하지 않는 경우, 서버 사이드 랜더링에서 사용할 수 있습니다.
타입: boolean = true
가능한 버전: 5.25.0+
예제:
module.exports = {
// …
module: {
rules: [
{
test: /\.png$/i,
type: 'asset/resource',
generator: {
emit: false,
},
},
],
},
};
output.assetModuleFilename
과 동일하지만 특정 규칙에 사용됩니다. output.assetModuleFilename
을 재정의하고 asset
및 asset/resource
모듈 유형에서만 작동합니다.
webpack.config.js
module.exports = {
//...
output: {
assetModuleFilename: 'images/[hash][ext][query]',
},
module: {
rules: [
{
test: /\.png/,
type: 'asset/resource',
},
{
test: /\.html/,
type: 'asset/resource',
generator: {
filename: 'static/[hash][ext]',
},
},
],
},
};
특정 애셋 모듈에 대해 publicPath
를 사용자 지정합니다.
string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
module.exports = {
//...
output: {
publicPath: 'static/',
},
module: {
rules: [
{
test: /\.png$/i,
type: 'asset/resource',
generator: {
publicPath: 'assets/',
},
},
],
},
};
'output.path'를 기준으로 지정된 폴더의 애셋을 내보냅니다. 사용자 지정 'publicPath'가 폴더 구조와 일치하도록 지정된 경우에만 필요합니다.
string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
module.exports = {
//...
output: {
publicPath: 'static/',
},
module: {
rules: [
{
test: /\.png$/i,
type: 'asset/resource',
generator: {
publicPath: 'https://cdn/assets/',
outputPath: 'cdn-assets/',
},
},
],
},
};
리소스와 일치하는 Condition
입니다. 자세한 내용은 규칙
조건을 참고하세요.
리소스 쿼리와 일치하는 Condition
입니다. 이 옵션은 요청 문자열의 쿼리 섹션에 대해 테스트하는 경우 사용됩니다(즉, 물음표부터). import Foo from './foo.css?inline'
을 사용하는 경우 다음 조건이 일치합니다.
webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/,
resourceQuery: /inline/,
type: 'asset/inline',
},
],
},
};
function(input) => string | object
Rule.type
이 'json'
으로 설정된 경우 Rules.parser.parse
옵션은 모듈의 소스를 구문 분석하고 이를 JavaScript 객체
로 변환하는 커스텀 로직을 구현하는 함수일 수 있습니다. 특정 로더없이 toml
, yaml
및 기타 JSON이 아닌 파일을 JSON으로 가져 오는 것이 유용할 수 있습니다.
webpack.config.js
const toml = require('toml');
module.exports = {
//...
module: {
rules: [
{
test: /\.toml/,
type: 'json',
parser: {
parse: toml.parse,
},
},
],
},
};
Rule이 일치 할 때도 사용되는 Rules
의 배열입니다.
bool
모듈의 어떤 부분에 부작용이 있는지 표시하세요. 자세한 내용은 Tree Shaking을 참고하세요.
테스트를 통과하는 모든 모듈을 포함합니다. Rule.test
옵션을 제공하면 Rule.resource
도 제공 할 수 없습니다. 자세한 내용은 Rule.resource
및 Condition
를 참고하세요.
string
가능한 변수: 'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'css/auto'
Rule.type
은 일치하는 모듈의 유형을 설정합니다. 이는 defaultRules 및 기본값 import 동작이 발생하지 않습니다. 예를 들어 커스텀 로더를 통해 .json
파일을 로드하려면 type
을 javascript/auto
로 설정하여 webpack에 내장된 json import를 우회해야합니다.
webpack.config.js
module.exports = {
//...
module: {
rules: [
//...
{
test: /\.json$/,
type: 'javascript/auto',
loader: 'custom-json-loader',
},
],
},
};
asset*
유형에 대한 자세한 내용은 애셋 모듈 가이드를 참고하세요.
css/auto
모듈 유형의 사용 사례는 여기를 참고하세요. css/auto
를 사용하려면 experiments.css
를 활성화해야 합니다.
module.exports = {
target: 'web',
mode: 'development',
experiments: {
css: true,
},
module: {
rules: [
{
test: /\.less$/,
use: 'less-loader',
type: 'css/auto',
},
],
},
};
[UseEntry]
function(info)
Webpack 5.87.0부터 undefined
null
과 같은 falsy 값을 사용하여 조건부로 특정 사용 항목을 비활성화할 수 있습니다.
[UseEntry]
Rule.use
는 모듈에 적용되는 UseEntry의 배열일 수 있습니다.
use: [ 'style-loader' ]
같이 string을 전달하는 것은 use: [ { loader: 'style-loader '} ]
같이 loader 프로퍼티에 대한 단축어 입니다.
로더는 여러 로더를 전달하여 연결될 수 있으며, 이는 오른쪽에서 왼쪽으로, 마지막 설정에서 첫 번째 설정 순서로 적용됩니다.
webpack.config.js
module.exports = {
//...
module: {
rules: [
{
//...
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'less-loader',
options: {
noIeCompat: true,
},
},
],
},
],
},
};
function(info)
Rule.use
는 로드 중인 모듈을 설명하는 객체를 인수로 받는 함수일 수도 있으며 UseEntry
를 원소로 가지는 배열을 반환해야 합니다.
info
객체 파라미터는 다음과 같은 필드를 가집니다.
compiler
: 현재 webpack 컴파일러 (정의되지 않을 수 있음)issuer
: 로드 중인 모듈을 가져오는 모듈의 경로realResource
: 항상 로드되는 모듈의 경로resource
: 로드되는 모듈의 경로. 요청 문자열의 !=!
를 통해 리소스 이름을 덮어 쓰는 경우를 제외하고는 일반적으로 realResource
와 같습니다.반환값에 use: [ 'style-loader' ]
같이 배열과 동일한 단축어를 사용할 수 있습니다.
webpack.config.js
module.exports = {
//...
module: {
rules: [
{
use: (info) => [
{
loader: 'custom-svg-loader',
},
{
loader: 'svgo-loader',
options: {
plugins: [
{
cleanupIDs: {
prefix: basename(info.resource),
},
},
],
},
},
],
},
],
},
};
자세한 정보는 UseEntry를 참고하세요.
모듈 계층에서 해석에 대한 설정을 할 수 있습니다. 해설 설정 페이지에서 가능한 모든 옵션을 참고하세요. 적용된 모든 해석 옵션은 상위 계층의 해석 옵션과 병합됩니다.
예를 들면, 모듈 계층 해석을 보여주기 위해 ./src/index.js
, ./src/footer/default.js
및 ./src/footer/overridden.js
엔트리가 있다고 가정하겠습니다.
./src/index.js
import footer from 'footer';
console.log(footer);
./src/footer/default.js
export default 'default footer';
./src/footer/overridden.js
export default 'overridden footer';
webpack.js.org
module.exports = {
resolve: {
alias: {
footer: './footer/default.js',
},
},
};
이 설정으로 번들을 생성하면 console.log(footer)
는 'default footer'를 출력합니다. .js
파일에 대한 Rule.resolve
를 설정하고 footer
별칭을 overridden.js
로 설정해보겠습니다.
webpack.js.org
module.exports = {
resolve: {
alias: {
footer: './footer/default.js',
},
},
module: {
rules: [
{
resolve: {
alias: {
footer: './footer/overridden.js',
},
},
},
],
},
};
변경된 설정으로 번들을 생성하면 console.log(footer)
는 'overridden footer'를 출력합니다.
boolean = true
활성화되면 .mjs
파일 또는 다른 .js
파일에서 모듈을 import
할 때 가장 가까운 상위 package.json
파일에 "type"
필드가 "module"
을 값으로 가지고 있는 경우 파일 확장자를 제공해야합니다. 그렇지 않으면 webpack이 Module not found
오류와 함께 컴파일에 실패합니다. 그리고 webpack은 resolve.mainFiles
에 정의된 파일 이름으로 디렉터리를 확인하지 않으므로 파일 이름을 직접 지정해야합니다.
webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.m?js$/,
resolve: {
fullySpecified: false, // 비활성화
},
},
],
},
};
Condition은 아래 항목중의 하나가 됩니다.
{ and: [Condition] }
: 모든 Condition이 일치해야 합니다.
{ or: [Condition] }
: 어떤 Condition이든 일치하면 됩니다.
{ not: [Condition] }
: 모든 Condition이 일치하면 안 됩니다.
Example:
const path = require('path');
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/,
include: [
// `app/styles`로 시작하는 현재 디렉터리와 관련된 모든 경로를 포함합니다.
// 예. `app/styles.css`, `app/styles/styles.css`, `app/stylesheet.css`
path.resolve(__dirname, 'app/styles'),
// `vendor/styles/` 디렉터리의 내용만 포함하도록 슬래시를 추가합니다.
path.join(__dirname, 'vendor/styles/'),
],
},
],
},
};
object
function(info)
object
문자열인 loader
프로퍼티가 있어야 합니다. 로더 해석 옵션(resolveLoader)을 사용하여 설정 context
에 상대적으로 해석됩니다.
options
프로퍼티는 문자열이나 객체가 될 수 있습니다. 이 값은 로더에 전달되며 로더 옵션으로 해석되어야 합니다.
호환성을 위해 options
프로퍼티의 별칭인 query
속성도 가능합니다. options
프로퍼티를 사용하는 것을 권장합니다.
webpack은 옵션을 포함한 모든 로더와 리소스에서 고유한 모듈 식별자를 생성해야합니다. 옵션 객체의 JSON.stringify
로 이를 시도합니다. 99.9%의 경우에 문제가 없지만 리소스에 다른 옵션이 있는 동일한 로더를 적용하고 옵션에 동일한 문자열 값이 있는 경우 고유하지 않을 수 있습니다.
순환 JSON 같은 옵션 객체를 문자열화 할 수 없는 경우에도 중단됩니다. 이를 해결하기 위해 고유 식별자로 사용되는 옵션 객체에서 ident
속성을 가질 수 있습니다.
webpack.config.js
module.exports = {
//...
module: {
rules: [
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
};
function(info)
UseEntry
는 로드되는 모듈을 나타내는 객체를 인수로 받는 함수일 수도 있으며 함수가 아닌 UseEntry
객체를 반환해야 합니다.
info
객체 파라미터에는 다음과 같은 필드가 있습니다.
compiler
: 현재 webpack 컴파일러 (정의되지 않을 수 있음)issuer
: 로드 중인 모듈을 가져오는 모듈의 경로realResource
: 항상 로드되는 모듈의 경로resource
: 로드되는 모듈의 경로. 요청 문자열의 !=!
를 통해 리소스 이름을 덮어 쓰는 경우를 제외하고는 일반적으로 realResource
와 같습니다.webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.svg$/,
type: 'asset',
use: (info) => ({
loader: 'svgo-loader',
options: {
plugins: [
{
cleanupIDs: { prefix: basename(info.resource) },
},
],
},
}),
},
],
},
};
이 옵션은 동적 종속성이 발생할 때 생성되는 컨텍스트의 기본 설정을 설명합니다.
unknown
동적 종속성 의 예시: require
.
expr
동적 종속성 의 예시: require(expr)
.
wrapped
동적 종속성 의 예시: require('./templates/' + expr)
.
다음은 기본값으로 사용 가능한 옵션입니다.
webpack.config.js
module.exports = {
//...
module: {
exprContextCritical: true,
exprContextRecursive: true,
exprContextRegExp: false,
exprContextRequest: '.',
unknownContextCritical: true,
unknownContextRecursive: true,
unknownContextRegExp: false,
unknownContextRequest: '.',
wrappedContextCritical: false,
wrappedContextRecursive: true,
wrappedContextRegExp: /.*/,
strictExportPresence: false,
},
};
다음은 몇 가지 사용 사례입니다.
wrappedContextCritical: true
)require(expr)
는 전체 디렉터리를 포함해야합니다(exprContextRegExp: /^\.\//
).require('./templates/' + expr)
은 기본적으로 하위 디렉터리를 포함하지 않아야 합니다(wrappedContextRecursive: false
).strictExportPresence
는 export가 누락되면 경고 대신 오류를 발생시킵니다.wrappedContextRegExp: /\\.\\*/
)