Loaders

Webpack의 loaders를 사용하면 파일을 전처리 할 수 있습니다. 이렇게 하면 JavaScript를 넘어 모든 정적 리소스를 번들링할 수 있습니다. Node.js를 사용하여 자신만의 로더를 쉽게 작성할 수 있습니다.

로더는 require() 구문에서 loadername! 접두사를 사용하거나, webpack 설정에서 정규식을 통해 자동으로 활성화됩니다. configuration을 참고하세요.

Files

• val-loader는 코드를 모듈로 실행하고 JS 코드로 내보낼지 고려합니다.
• 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

• html-loader는 HTML을 문자열로 내보내고, 정적 리소스에 대한 참조가 필요합니다.
• pug-loader는 Pug 그리고 Jade 템플릿을 로드하고 함수를 반환합니다.
• markdown-loader는 마크다운을 HTML로 컴파일합니다.
• react-markdown-loader는 markdown-parse 파서를 사용해 마크다운을 React Component로 컴파일합니다.
• posthtml-loader는 PostHTML을 사용해 HTML 파일을 로드하고 변환합니다.
• handlebars-loader는 Handlebars를 HTML로 컴파일합니다.
• markup-inline-loader는 인라인 SVG/MathML 파일을 HTML로 변환합니다. 아이콘 폰트를 적용하거나 SVG에 CSS 애니메이션을 적용할 때 유용합니다.
• twig-loader는 Twig 템플릿을 컴파일하고 함수를 반환합니다.
• remark-loader는 빌트인 이미지 해상도로 remark를 통해 마크다운을 로드합니다.

Styling

• style-loader는 DOM에 스타일로 모듈 내보내기를 추가합니다.
• css-loader는 리졸브된 가져오기로 CSS 파일을 로드하고 CSS 코드를 반환합니다.
• 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의 목록을 참고하세요.