메로그

웹팩이란? 모듈을 지원하기 시작한 것은 es2015(es6) 이상 입니다. 그 전에는 그럼 어떻게 했냐? 우리가 알고 있듯이 script 를 하나씩 로드해서 사용하였습니다. 또는 위와 같은 문제를 개선하여 즉시 실행 함수 (IIFE) 방식을 사용하였습니다. 그러면서 다양한 모듈 스펙 (AMD, CommonJS, UMD) 등이 나오기 시작하였습니다. 웹팩은 여러 개 파일을 하나의 파일로 합쳐주는 번들러 입니다. 시작점인 엔트리를 기준으로 의존되어 있는 모듈을 찾아 하나의 결과물로 합쳐서 만들어줍니다. 웹팩 설치 // 앞에 @ 를 붙여 원하는 버전을 설치할 수 있음. 나는 4버전을 설치하겠음 npm install webpack@4 npm install webpack webpack-cli 설치가 완료되면 아래..

Webpack 의존관계이 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러 입니다. 여러 개의 자바스크립트 파일을 번들링하고, 트랜스파일링 작업을 할 수 있습니다. Webpack vs Gulp Gulp 도 위의 동작과 비슷하게 할 수 있지만, Gulp 는 단순 task runner 일 뿐이다. (같은 일을 자동으로 처리하는..) Webpack 은 Package Builder 라고 불리는데 Package.json 의 스크립트를 기반으로 동작하기 때문이다. (Gulp 는 gulpfile..) 쉽게 생각해보면, 규모가 작고 간단한 일만 처리하는 프로젝트라면 Gulp 를 사용하는 것이 훨씬 가성비가 좋다. 대신에 규모가 큰 프로젝트라면, Gulp 의 기능 + 의존성 관리 기능(예: 노드 기반으로 ..