Webpack 러닝 가이드
  • Webpack 모듈 번들러
  • Web Modules
    • Legacy 모듈 관리
    • ES 모듈 관리
  • Babel
    • Babel JavaScript 컴파일러
    • Babel 독립형 빌드
    • Babel 노드 (Node.js) ✘
    • Babel CLI 구성
    • Babel 플러그인
  • webpack
    • Webpack 개발 환경 구성
      • Webpack 설치
      • Webpack 통합
      • Webpack 구성 파일
      • Webpack 워치
      • Webpack 모드
      • Webpack 별칭 등록
      • Webpack 호환성
      • Webpack 개발 서버
      • Webpack 멀티 페이지 설정
    • Webpack 로더
      • File 로더
      • CSS 로더
      • PostCSS 로더
      • Sass 로더
      • Babel 로더
      • TypeScript 로더
    • Webpack 플러그인
      • 환경 변수 등록
      • 빌드 결과 자동 정리
      • 빌드 결과 자동 주입
      • CSS 파일 개별 추출
      • CSS 파일 크기 최적화
      • CSS 미디어쿼리 스플리팅
      • 이미지 파일 크기 최적화
  • React
    • React App 매뉴얼 구성
      • Webpack 초기 구성
      • Babel 컴파일러 구성
      • CSS 스타일 구성
      • 이미지 구성
      • 환경변수 플러그인
      • HTML 플러그인
      • 최적화 구성
      • 코드 스플리팅
      • 개발 서버
      • 이미지, 폰트 에셋 구성
      • 환경 변수 + HTML 구성
      • 빌드 최적화 구성
      • 빌드 자동 정리 구성
      • 개발 서버 구성
      • 폴리필 구성
Powered by GitBook
On this page
  • 로더 설정
  • 참고

Was this helpful?

  1. webpack

Webpack 로더

PreviousWebpack 멀티 페이지 설정NextFile 로더

Last updated 4 years ago

Was this helpful?

기본적으로 Webpack은 JavaScript 및 JSON 파일만 해석 가능합니다. 하지만 로더(loaders)를 사용하면 Webpack이 다른 포멧의 파일을 처리하고, 이를 앱에서 사용할 수 있는 모듈로 변환 할 수 있습니다.

module.exports = {
  // 모듈
  module: {
    // 규칙
    rules: [
      // 로더 설정
      {
        test: /파일_포멧_정규식/,
        use: ['로더']
      },
      // 로더 추가 설정...
    ]
  }
}

로더 설정

참고

File 로더
CSS 로더
PostCSS 로더
Sass 로더
Babel 로더
TypeScript 로더
Concepts | webpackwebpack
로더(Loader)란?
Loaders | webpackwebpack
Webpack Loader 목록
Logo
Logo