# Webpack 호환성
## 브라우저 호환성
Webpack은 [ES5 호환이 가능한 모든 브라우저](https://kangax.github.io/compat-table/es5/)를 지원합니다 (IE8 이하 미지원). Webpack은 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 사용해 모듈을 불러 옵니다([`import()`](https://webpack.js.org/guides/code-splitting/#dynamic-imports), [`require.ensure()`](https://webpack.js.org/guides/code-splitting/#dynamic-imports)). Promise를 지원하지 않는 브라우저(IE 미지원)에서 사용하려면 모듈을 로드하는 코드 작성 전에 [폴리필(Polyfill)](https://ko.wikipedia.org/wiki/%ED%8F%B4%EB%A6%AC%ED%95%84_\(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D\))을 로드해야 합니다.
{% tabs %}
{% tab title="패키지 설치" %}
```bash
npm i core-js regenerator-runtime unfetch
```
{% endtab %}
{% tab title="src/polyfills/index.js" %}
```javascript
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'unfetch'
```
{% endtab %}
{% tab title="webpack.config.js" %}
```javascript
module.exports = {
entry: {
polyfills: './src/polyfills/index.js',
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
// ...
}
```
{% endtab %}
{% endtabs %}
{% hint style="danger" %}
Babel v7.4.0부터 [@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill) 패키지는 사용되지 않습니다. 대신 ECMAScript 기능을 대체하는 [core-js/stable](https://github.com/zloirock/core-js), 제너레이터 함수 기능을 대체하는 [regenerator-runtime/runtime](https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js)을 사용합니다.
{% endhint %}
`polyfills.bundle.js` 파일이 필요한 브라우저 환경에서 조건부 로드하기 위해 폴리필이 필요한 환경인지 검사하는 간단한 테스트를 수행합니다. 필요한 환경 임이 감지되면 동적으로 폴리필 파일을 불러와 사용하게 됩니다.
{% tabs %}
{% tab title="dist/index.html" %}
```markup
```
{% endtab %}
{% tab title="src/polyfills/detect.js" %}
```javascript
// 모던 브라우저 감지
const isModern = 'fetch' in window && 'assign' in Object
// 모던 브라우저가 아닌 경우
if (!isModern) {
// 동적으로