Configuration Languages | Webpack

Webpack은 여러 프로그래밍 및 데이터 언어로 작성된 설정 파일을 허용하므로, 프로젝트에 적합한 형식(JavaScript, TypeScript, CoffeeScript 또는 JSON5, YAML, TOML과 같은 일반 데이터 파일)으로 설정을 작성할 수 있습니다.
defineConfig는 webpack에서 내보내는 헬퍼로, 추가적인 타입 어노테이션 없이 편집기에서 설정에 대한 타입 체킹 및 자동 완성을 제공합니다. 이는 항등 함수(런타임에 전달된 설정을 단순히 반환하는 no-op)이므로 순수 JavaScript 설정에서도 작동합니다.
webpack-cli가 로드할 수 있는 모든 형태를 허용합니다: 단일 설정 객체, 설정 배열(멀티 컴파일러), 이들 중 하나를 반환하는 함수, 그러한 함수들의 배열, 또는 이들 중 하나를 해석하는 Promise.
TypeScript에서 webpack 설정을 하기 위해서는, 먼저 필요한 디펜던시, 예를들면 TypeScript와 DefinitelyTyped에서 관련있는 타입 정의를 설치해야 합니다.
설치를 마쳤으면, 다음 설정을 작성하세요.
위 예시는 TypeScript 2.7 이상 버전의 tsconfig.json 파일에서 새로운 esModuleInterop 및 allowSyntheticDefaultImports 컴파일러 옵션과 함께 사용된다고 가정합니다.
CommonJS 및 ESM 형식의 설정을 모두 지원합니다.
Node.js는 v22.18.0부터 내장된 타입 제거 기능을 지원하므로, 아래 설명된 추가 설정은 이전 버전에서만 필요합니다.
열거형 선언과 같이 JavaScript 코드 생성이 필요한 지울 수 없는 TypeScript 구문의 변환을 활성화하려면 매개변수 속성에 --experimental-transform-types 플래그를 사용하십시오.
typescript 형식을 지원하지 않는 이전 버전의 Node.js를 사용 중이거나 tsconfig.json의 compilerOptions에서 module을 commonjs로 설정하려는 경우, 이 문제를 해결할 수 있는 네 가지 방법이 있습니다.
첫 번째 방법은 tsconfig.json 파일을 열고 compilerOptions를 찾는것입니다. target을 "ES5"로 하고 module을 "CommonJS"로 설정합니다.(또는 module 옵션을 완전히 제거합니다)
tsc에 대해 "module": "ESNext"를 유지할 수 있으며, webpack 또는 다른 빌드 도구를 사용하는 경우 ts-node에 대한 오버라이드를 설정합니다. ts-node 설정
세 번째 방법은 moduleTypes로, 설정 파일 하나의 모듈 타입만 오버라이드합니다. 이것은 두 가지 오버라이드 중에서 일반적으로 더 나은 방법입니다. compilerOptions.module과 달리 Node.js에도 해당 파일을 CommonJS로 로드하도록 알려주므로, Node.js가 ES 모듈을 require()하도록 요청받을 때 발생하는 오류를 방지합니다.
네 번째 방법은 webpack 설정을 위한 별도의 TypeScript 설정을 만드는 것입니다.
tsconfig-for-webpack-config.json
TS_NODE_PROJECT는 ts-node 자체에서 읽으므로 이를 사용하기 위해 추가 패키지가 필요하지 않습니다.
그런 다음 환경 변수 TS_NODE_PROJECT를 다음과 같이 설정합니다.
TS_NODE_PROJECT가 "TS_NODE_PROJECT" unrecognized command 에러와 함께 작동하지 않을 수 있다는 제보를 받았습니다. cross-env로 실행하면 문제를 해결할 수 있습니다. 자세한 내용은 해당 이슈를 참고하세요.
마찬가지로, CoffeeScript를 사용하려면 먼저 필요한 디펜던시를 설치해야 합니다.
webpack.config.coffee
아래 예제에서 JSX (React JavaScript Markup) 및 Babel은 webpack이 이해할 수 있는 JSON 설정을 만드는 데 사용됩니다.
먼저, 필요한 디펜던시를 설치하세요.
webpack.config.babel.js
다른 곳에서 Babel을 사용하고 modules를 false로 설정 한 경우, 두개의 별도 .babelrc파일을 유지하거나 새로운 import 와 export 구문 대신 const jsxobj = require('jsxobj'); 와 module.exports를 반드시 사용해야 합니다. 이는 Node가 새로운 ES6 기능을 다양하게 지원하지만, 아직 ES6 모듈 구문은 지원하지 않기 때문입니다.
설정이 순수한 정적 데이터(함수, process.env 읽기, 계산된 값이 없음)인 경우 JavaScript 대신 데이터 파일로 작성할 수 있습니다. webpack-cli는 다음 확장자를 직접 파싱합니다:
파서는 webpack-cli와 번들되지 않습니다 — 사용하는 형식에 필요한 파서를 개발 의존성으로 설치하세요. 누락된 경우 webpack-cli가 중지되고 설치해야 할 정확한 패키지를 알려줍니다.
파일을 --config로 지정하거나, 기본 설정으로 선택되도록 이름을 지정하세요(예: webpack.config.json5):
webpack.config.json5
이러한 형식은 순수 데이터만 설명합니다. 동적 설정(환경 기반 분기, 플러그인 인스턴스 또는 함수 형식)이 필요한 경우 JavaScript 또는 TypeScript 설정을 대신 사용하세요.
저작권은 OpenJS Foundation 및 webpack 기여자에게 있으며, 모든 권리는 보호됩니다. OpenJS Foundation은 등록 상표를 보유하고 있으며 상표를 사용합니다. OpenJS Foundation의 상표 목록은 Trademark Policy와 Trademark List에서 확인할 수 있습니다. OpenJS Foundation 상표 목록에 표시되지 않은 상표 및 로고는 각 소유자의 상표™ 또는 등록 상표®입니다. 이를 사용한다고 해서 해당 소유자와의 제휴 관계나 보증을 의미하지는 않습니다.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy