폴리필 구성

1. 폴리필, Unetch 설치

core-js/stable, regenerator-runtime/runtime, unfetch 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i core-js regenerator-runtime unfetch

Babel v7.4.0부터 @babel/polyfill 패키지는 사용되지 않습니다. 대신 ECMAScript 기능을 대체하는 core-js/stable, 제너레이터 함수 기능을 대체하는 regenerator-runtime/runtime을 사용합니다.

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

src/polyfills/index.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'unfetch'

src/polyfills/detect.js

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

webpack.config.js

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,
    // ...
  }
}