[번역] webpack 번들 생성 하기 방법 #2

지난번에 webpack의 개념과 간단 설치 및 간단 사용에 대해 다뤄봤는데요 오늘은 이어서 Webpack Creating a Bundle에 대해서 알아보겠습니다. 

 

지난번 webpack 의 개념과 간단 설치 보지 못하신 분들은 아래 카드 링크 클릭해주세요 :)

 

개발을 정리하며 - Webpack 기본 개념과 간단 설치 및 사용법

Creating a Bundle

먼저 소스 코드(/src) 에서 배포 코드(/dist)까지 폴더 및 파일 구조를 약간만 변경하겠습니다. 소스코드는 우리들이 쓰고 수정하고 하는 코드를 말합니다. 배포 코드는 웹브라우저에 로드될 최소화 및 최적화된 코드를 말합니다. 디렉터리 구조를 아래와 같이 변경하십시오.

index.js 에 lodash의 의존성을 넣어 묶어 제공하려면, 우리는 라이브러리를 로컬에 설치해야 합니다.

 

npm install --save lodash

 

여러분의 배포 버전에 번들을 제공하려고 한다면 설치할 때, npm install --save를 사용해야 합니다. 만일 개발목적으로 사용하려면 (예 , linter,testing libraies ...) npm install --save-dev 를 사용해야합니다. 더 많은 정보를 알아보기 위해 npm 문서를 참고하세요.

 

자, lodash 스크립트를 import 합니다.

 

다음, 번들링 스크립트를 위치시킬 것이기 때문에, 우리는 index.html 파일을 수정해야 합니다. lodash 스크립트를 import 했기 때문에 html 파일에서 제거하고, src 하위 파일 대신 다른 스크립트 태그를 수정하여 번들을 로드합니다.

 

이 설정에서 index.js 는 명시적으로 lodash를 _ 로 바인드 했습니다. 웹팩은 필요한 모듈 dependencies를 명시함으로, 종속된 모듈을 관리하여 스크립트가 올바른 순서로 실행될 수 있도록 최적화된 번들을 생성합니다.

 

자 그럼 npx webpack을 실행해봅시다, 그러면 entry point 인 src/index.js를 가저다가 output에 dist/main.js라는 새로운 파일을 생성될 것입니다. node 8.2 / npm 5.2.0 이상과 함께 제공되는 npx 명령어는 처음에 설치한 webpack 패키지의 바이너리를 실행합니다. 

 

npx webpack

...
Built at: 13/06/2018 11:52:07
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

출력이 다를 수 있지만 만약 빌드가 성공했다면 잘 되어 가고 있는 것입니다. WARNING에 대해 걱정하지 마십시오. 그 부분은 다음에 다루겠습니다.

 

여러분의 브라우저로 index.html을 실행해보시면 모든 게 잘 처리됨을 확인할 수 있습니다.

여러분은 아래 문구를 보게 되실 것입니다. 

"Hello webpack"

 

다음번에는 webpack configuration 사용법과 NPM 스크립트를 정리해보겠습니다.