[ WEBPACK 03 ] WebPack 정리

[ WEBPACK 03 ] WebPack 정리

WebPack 총정리

안녕하세요. 코드부기입니다.
웹팩에 대한 마지막 시간입니다.
웹팩을 한마디로 정리하자면 하나로 통합해주는 도구입니다.
http/1이 느리기 때문에 모든 파일을 요청할 수는 없고 통합하여 파일을 줄여 요청 수를 줄이는 방법밖엔 없습니다.

파일을 통합해주는 번들러는 Gulp, Grunt같은 도구를 이용하여 파일들을 통합해주곤 하였습니다. 그 후에 번들러의 최종 결정체인 WebPack을 이용하게 되었는데요.
위의 그림처럼 여러 종류의 파일들을 합쳐주는 역할을 합니다.

js가 요즘 웹개발 언어로 뜨기 시작하면서 하나의 JS로 합쳐주는게 중요합니다.
여러 Js파일들은 import, require을 통해 서로 의존관계를 지니고 있습니다.

일단 npm을 통해서 웹팩을 다운받게 되면 webpack파일이 생성되게 됩니다.
생성되는 파일은 webpack.config.js입니다.




다음과 같이 entry, output, module, plugins부분이 있습니다.
끝에 있는 resolve 속성은 웹팩이 자동으로 경로나 확장자를 처리해주게 하는 기능을 가지고 있습니다. 그리고 modules에 'node_modules'를 넣어야지만 node_modules를 인식할 수가 있습니다. 그리고 extensions는 필요가 없습니다. 웹팩이 자동으로 처리하기 때문이죠.

mode

mode는 사진에서 'development'라고 나와있는데 개발 모드라는 의미입니다. 만약 저 모드를 'production'으로 바꾸게 된다면 배포 모드로 변경이 되면서 알아서 환경설정을 합니다.

entry

entry는 웹팩의 진입점입니다. entry부분에 app이 적혀져 있으므로 빌드가 되면서 app.js라는 파일이 생성되게 됩니다.

output

output에서 path속성은 파일이 저장될 경로를 의미합니다.

그리고 filename속성안의 name안에는 entry에서 입력한 속성 키가 들어갑니다.

그리고 publicpath 속성은 파일들이 위치하게 될 서버상에 저장될 경로를 의미합니다.

plugins

plugins는 다양한 기능들을 추가할 수 있습니다. 예를 들어 압축, 핫리로딩 등 다양한 기능들이 있습니다. 

그 외에도 다양한 기본 제공 플러그인들도 있으니 나중에 확인해보세요.

직접 WebPack을 npm모듈을 통해서 받아보고 프로젝트에 적용해보는 시간을 각자 가져보게 된다면 더 이해가 잘 되실겁니다. WebPack을 너무 어렵게만 받아들이지 마세요.