entry와 output
entry entry란 웹팩에서 웹자원을 변환하기 위해 최초로 진입하는 곳이자 번들링하고자 하는 자바스크립트 파일 경로와 이름을 적는 곳이다. 이 속성에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져 있어야 한다. 그림으로 나타내면 다음과 같다. 위와 같이 모듈 간의 의존관계가 생기는 구조를 dependency graph라고 하며 코드로 나타내면 다음과 같다. // index.js import {item} from './item.js'; import {upload} from './upload.js'; import {signup} from ..
웹팩을 쓰는 이유?
이 글은 우선 npm과 모듈이 무엇인지 그리고 바닐라 자바스크립트의 기본문법에 대해 이미 공부한 독자들에게 설명하는 느낌으로 작성한 것이다. 결코 필자가 webpack을 잘 알고 있어서 튜토리얼로 작성한 글이 아니며 어디까지나 필자가 webpack에 대해 공부한 부분을 정리하기 위해 작성한 글임을 염두해뒀으면 한다. 웹팩을 쓰는 이유가 무엇인지 나름대로 생각해보았다 1. 파일 단위로 자바스크립트 모듈 관리 가능 여기서 모듈이란 파일이나 코드를 하나의 단위로 하여 애플리케이션 하나의 구성요소를 의미한다. 이렇게 모듈로 관리하면 장점은 각 단위로 코드를 재사용할 수 있고 규모가 큰 애플리케이션을 작은 모듈들로 잘게 분리해서 관리할 수 있다. 자바스크립트는 전역 스코프로 공유하기 때문에 변수 충돌의 가능성이 ..