[Webpack][Babel] 번들링시에 외부 패키지도 번들링에 포함시키기(IE11지원)

Webpack 을 이용하여 번들링시에 package.json 에 기술된 모듈들은 대부분 번들링프로세싱에서 제외시키고 번들링을 한다.

{
    test: /\.(js|jsx)$/,
    // package.json 에 기술되어 설치된 npm 모듈들은 Babel 에서 제외 "/node_modules/" 하위 디렉토리
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
},

하지만 최근 일부 npm 모듈들은 IE11 를 지원하지 않는 모듈들도 나타나서 이런 모듈들을 포함해서 쓸경우 IE에서 실행할경우 ES6 미지원에 대한 에러가 발생하는 경우가 있다.

이런 브라우져들도 지원을 하려면 이때 package.json 에 기술되었더라도 Babel 을 이용한 번들링이 필요한데, 이때 다음과 같은 정규식 문법으로 exclude 필드에서 제외하는 방법이 있다.

{
    test: /\.(js|jsx)$/,
    // swagger-parser - v10.0.2
    // swagger-parser 의 경우 내부적으로 ES6의 모듈 2개에 대한 디펜던시를 가지고 있는데
    // 해당 모듈들을 찾아서 다음과같이 babel-loader 에 exclude 에 포함되지 않도록 설정한다
    exclude: /node_modules\/(?!(@apidevtools|@jsdevtools))/,
    loader: 'babel-loader?cacheDirectory',
    options: {
      presets: ['@babel/preset-env']
    }
},

위와같이 처리하고 Webpack 번들링을 수행하면, IE11 에서도 에러없이 ES6가 폴리필처리되어 잘 수행된다.

참고: tech.kakao.com/2020/12/01/frontend-growth-02/