Datagrid and Charting for Enterprise Applications
webpack
Proud to partner with webpack

Loaders

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

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

Files

  • val-loader는 코드를 모듈로 실행하고 JS 코드로 내보낼지 고려합니다.
  • ref-loader는 수동으로 파일 간의 의존성을 생성합니다.

JSON

Transpiling

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

Awesome

더 많은 써드 파티 로더는, awesome-webpack의 목록을 참고하세요.

Edit this page·Print this page
Next »
babel-loader

9 Contributors

simon04bajrasrhys-vdwEugeneHlushkohemal7735snitin315anshumanvjamesgeorge007chenxsan

Translators

choilim choilim