Loaders
What needs no loader
Webpack은 다음 항목을 자체적으로 처리합니다. 이 목록에 없는 항목에만 loader를 설치하세요.
- JavaScript, ESM and CommonJS
- JSON
- 이미지, 폰트, 미디어, 텍스트 파일 —
file-loader,url-loader,raw-loader를 대체하는 Asset Modules - WebAssembly —
experiments.asyncWebAssembly - CSS — 실험적인
experiments.css. 지원 범위 참고 - HTML — 실험적인
experiments.html. 지원 범위 참고 - TypeScript — 실험적인
experiments.typescript. Node.js 22.6 이상에서 타입을 제거하지만 타입 검사나 JSX 처리는 하지 않음
Webpack은 그 밖의 항목을 전처리할 수 있도록 loader를 지원합니다. 이를 통해 JavaScript 외의 모든 정적 리소스를 번들링할 수 있으며 Node.js로 자체 loader를 쉽게 작성할 수 있습니다.
Loader는 webpack 기능을 확장하는 별도 패키지이며 더 넓은 생태계에서 관리됩니다.
import .. from "mod";/require() 문에 loadername! 접두사를 사용하거나 webpack 설정의 정규식을 통해 loader를 자동 적용할 수 있습니다. 설정을 참고하세요.
Files
ref-loader는 수동으로 파일 간의 의존성을 생성합니다.
JSON
cson-loader는 CSON 파일을 로드 및 트랜스파일 합니다.
Transpiling
babel-loader는 ES2015+ 코드를 로드하고 Babel을 사용해 ES5로 트랜스파일 합니다.esbuild-loader를 사용하여 ES2015+ 코드를 로드하고, esbuild를 통해 ES6+ 코드로 변환합니다.buble-loader는 ES2015+ 코드를 로드하고 Bublé를 사용해 ES5로 트랜스파일 합니다.traceur-loader는 ES2015+ 코드를 로드하고 Traceur를 사용해 ES5로 트랜스파일 합니다.ts-loader는 JavaScript처럼 TypeScript 2.0+를 로드합니다.coffee-loader는 JavaScript처럼 CoffeeScript를 로드합니다.fengari-loader는 fengari를 사용해 Lua 코드를 로드합니다.elm-webpack-loader는 JavaScript처럼 Elm을 로드합니다.
Templating
pug-loader는 Pug 및 Jade template을 로드하고 함수를 반환합니다.markdown-loader는 Markdown을 HTML로 컴파일합니다.react-markdown-loader는 markdown-parse parser를 사용해 Markdown을 React Component로 컴파일합니다.posthtml-loader는 PostHTML을 사용해 HTML 파일을 로드하고 변환합니다.handlebars-loader는 Handlebars를 HTML로 컴파일합니다.markup-inline-loader는 SVG/MathML 파일을 HTML에 인라인으로 삽입합니다. icon font 또는 SVG에 CSS animation을 적용할 때 유용합니다.twig-loader는 Twig template을 컴파일하고 함수를 반환합니다.
Styling
css-utility-loader는 빌드 시점에 legacy CSS property를 파싱하여 최신 utility class(Tailwind)로 변환합니다.less-loader는 LESS 파일을 로드하고 컴파일합니다.sass-loader는 SASS/SCSS 파일을 로드하고 컴파일합니다.postcss-loader는 PostCSS를 사용해 CSS/SSS 파일을 로드하고 변환합니다.stylus-loader는 Stylus 파일을 로드하고 컴파일합니다.
Frameworks
vue-loader는 Vue Components를 로드하고 컴파일합니다.angular2-template-loader는 Angular 컴포넌트를 로드하고 컴파일합니다.
Awesome
더 많은 써드 파티 로더는, awesome-webpack의 목록을 참고하세요.
Next »
babel-loader