Webpack 호환성

브라우저 호환성

Webpack은 ES5 호환이 가능한 모든 브라우저를 지원합니다 (IE8 이하 미지원). Webpack은 Promise를 사용해 모듈을 불러 옵니다(import(), require.ensure()). Promise를 지원하지 않는 브라우저(IE 미지원)에서 사용하려면 모듈을 로드하는 코드 작성 전에 폴리필(Polyfill)을 로드해야 합니다.

npm i core-js regenerator-runtime unfetch

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

module.exports = {
  entry: {
    polyfills: './src/polyfills/index.js',
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  // ...
}

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

polyfills.bundle.js 파일이 필요한 브라우저 환경에서 조건부 로드하기 위해 폴리필이 필요한 환경인지 검사하는 간단한 테스트를 수행합니다. 필요한 환경 임이 감지되면 동적으로 폴리필 파일을 불러와 사용하게 됩니다.

<!-- 오래된 브라우저 감지 스크립트 → 폴리필 조건부 로드 -->
<script src="./dist/detect.polyfills.js"></script>

<!-- 메인 모듈 -->
<script src="./dist/main.js"></script>

// 모던 브라우저 감지
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)
}

module.exports = {
  entry: {
    'main': './src/index.js',
    'polyfills': './src/polyfills/index.js',
    'detect.polyfills': './src/polyfills/detect.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  // ...
}

빌드 명령을 실행하여 출력한 결과는 다음과 같습니다.

브라우저 캐싱

브라우저 캐싱은 애플리케이션 속도를 향상시켜 유용합니다. 하지만 개발 중에는 브라우저에 저장된 캐시로 인해 변경사항이 바로 반영되지 않아, 개발자에게 혼란을 야기할 수 있습니다. 그러므로 파일 이름에 임의의 md4-hash 코드를 추가해 개발 중 빌드 될 때 마다 매번 새로운 파일 이름이 설정되도록 하여 "개발 중 브라우저 캐싱 문제"를 해결할 수 있습니다.

module.exports = {
  output: {
    path: path.resolve(__dirname, './dist'),
    // 빌드(컴파일, 번들링 등) 결과 파일 브라우저 캐싱(Cachinig)
    filename: 'main.[contenthash].js'
  }
}