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. React
  2. React App 매뉴얼 구성

폴리필 구성

Previous개발 서버 구성

Last updated 4 years ago

Was this helpful?

1. 폴리필, Unetch 설치

, , 패키지를 프로젝트에 설치합니다.

npm i core-js regenerator-runtime unfetch

Babel v7.4.0부터 패키지는 사용되지 않습니다. 대신 ECMAScript 기능을 대체하는 , 제너레이터 함수 기능을 대체하는 을 사용합니다.

polyfills 디렉토리를 만든 후, index.js, detect.js 파일을 작성하고 저장합니다.

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'unfetch'
// 모던 브라우저 감지
const isModern = 'fetch' in window && 'assign' in Object

// 모던 브라우저가 아닌 경우
if (!isModern) {
  // 동적으로 <script> 요소 생성
  const scriptNode = document.createElement('script')
  // <script> 요소 속성 설정
  scriptNode.async = false
  scriptNode.src = './polyfills.js'
  // <head> 요소 안쪽 뒤에 삽입 (로딩)
  document.head.appendChild(scriptNode)
}

개발용 entry 구성과 빌드용 entry 구성을 구분하기 위해 아래와 같이 조건 처리합니다.

module.exports = (_env, argv) => {
  // 엔트리(입력)
  const entry = {
    main: './src/index.js',
  }

  // 개발 모드
  if (isProd) {
    // 엔트리 추가
    entry = {
      ...entry,
      'polyfills': './src/polyfills/index.js',
      'detect.polyfills': './src/polyfills/detect.js',
    }
  }
  
  // 구성 객체 반환
  return {
    entry,
    // ...
  }
}
core-js/stable
regenerator-runtime/runtime
unfetch
@babel/polyfill
core-js/stable
regenerator-runtime/runtime