Webpack의 기본 구조

module

---

• entry : module의 의존 관계를 이해하기 위한 시작점을 설정 (복잡한 참조관계를 갖고 있는 module 중에서 어떤 module을 시작점으로 해야할지 Webpack에게 알려주는 것)

module들의 의존성 그래프를 만들어 module들을 해석하고 bundling을 진행한다.

파일별로 쪼개진 module들의 내용을 bundle에 담는 과정이다.

• output : Webpack이 생성하는 bundle 파일에 대한 정보를 설정

Webpack 설치

---

package.json 파일을 먼저 생성해준다.

npm init -y

webpack-cli는 Webpack을 실행하는 명령어를 지원해주는 패키지이다.

npm install webpack webpack-cli --save-dev

설치가 끝나면 /node\_modules 디렉토리가 생성된다.

bundle 파일 만들기

bundle : module들의 의존성을 안전하게 유지시키면서 하나의 파일로 만드는 과정

npx : 설치된 패키지를 기준으로 /node\_modules 안에서 실행 파일을 찾아 실행해주는 역할을 한다.

node\_modules 안의 .bin의 module들은 패키지를 실행해준다.

target : Webpack이 어느 환경에서 실행되는지 Webpack에게 알려주는 역할을 한다.

readline 사용할 때 오류가 발생하면 target에 추가해준다.

추가해주는 명령어는 다음과 같다.

npx webpack --target=node

위 명령어를 실행하면 /src 안에 있는 의존성 관계의 파일들을 /dist 에 bundle 파일로 생성해준다.