Webpack 호환성

Last updated 4 years ago

Was this helpful?

Webpack 호환성

브라우저 호환성

Webpack은 를 지원합니다 (IE8 이하 미지원). Webpack은 를 사용해 모듈을 불러 옵니다(, ). Promise를 지원하지 않는 브라우저(IE 미지원)에서 사용하려면 모듈을 로드하는 코드 작성 전에 을 로드해야 합니다.

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부터 패키지는 사용되지 않습니다. 대신 ECMAScript 기능을 대체하는 , 제너레이터 함수 기능을 대체하는 을 사용합니다.

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

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

브라우저 캐싱

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

md4 캐시 코드가 추가된 파일 이름 결과는 다음과 같습니다.

플랫폼 호환성

Webpack v5는 Node.js 버전 10.13.0 이상에서 실행됩니다.

참고

PreviousWebpack 별칭 등록 NextWebpack 개발 서버

Last updated 4 years ago

Was this helpful?

브라우저 호환성

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부터 패키지는 사용되지 않습니다. 대신 ECMAScript 기능을 대체하는 , 제너레이터 함수 기능을 대체하는 을 사용합니다.

<!-- 오래된 브라우저 감지 스크립트 → 폴리필 조건부 로드 -->
<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'
  }
}

md4 캐시 코드가 추가된 파일 이름 결과는 다음과 같습니다.

플랫폼 호환성

Webpack v5는 Node.js 버전 10.13.0 이상에서 실행됩니다.

Node.jsNode.js

참고

Shimming | webpackwebpack

Under The Hood | webpackwebpack

@babel/polyfill · Babel

GitHub - developit/unfetch: 🐕 Bare minimum 500b fetch polyfill.GitHub