Webpack의 사용법

Webpack의 옵션 Externals

이 옵션의 경우 사실 알고만 있고 정리를 안하다 마침 최근 비지니스를 진행하며, Daum Post API를 연동하며 외부의 Library를 끌고와야하는 상황이 생겨서 포스트를 정리하게 되었다. 상황의 전말은 이렇다. React의 경우 node의 패키지에 ‘react-daum-postcode’ 라는 게 있어 알아서 컴포넌트화 시켜준다지만 Vue의 경우에는 안타깝게도 그러한 게 없었다. 그래서 이 컴포넌트를 직접 만들어야 했다.

이 옵션은 어떠한 어플리케이션 혹은 라이브러리를 개발하게 될 시, 그 안에서 사용하는 라이브러리를 사용자들이 script 태그를 이용해서 추가를 해주거나 amd loader 방식으로 사용할 수 있도록 해주는 옵션이다. 간단하게 말해서 webpack 빌드 시 이 옵션에 어떠한 라이브러리에 대해서 명시가 되어 있을 경우, 빌드시 package가 설치 되어 있지 않더라도 런타임 단계에서 해당 라이브러리를 끌어올 수 있다.

위에서 설명했듯이, Daum Post API를 끌고와야하는 데 API의 경우 npm에는 그 패키지가 존재하지 않았다. 이럴 때 script 태그를 이용해서 API Library를 끌고 오고, webpack에서 externals 옵션에 추가 해준다.

1
2
3

externals: {
  "Daum": "daum"
}

이렇게 명시를 해주면 bundle 파일 안에서 require(‘Daum’) 으로 외부의 Library를 사용할 수 있다.

아래에 Daum Postcode API 에 대한 기능을 Vuejs에 적용한 예제 파일이 있다.

Daum postcode API 예제보러가기

출처

• webpack 공식 블로그