웹팩의 4가지 주요 속성 - Entry

웹팩의 주요 속성

웹팩의 빌드(파일 변환) 과정을 이해하기 위해서는 아래 4가지 주요 속성에 대해서 알고 있어야 한다.

• entry
• output
• loader
• plugin

📌 Entry

웹팩은 기본적으로 여러 개의 자바스크립트 모듈을 하나의 파일로 묶어내는 번들러이다. 따라서 웹팩은 다른 모듈을 사용하고 있는 최상위 자바스크립트 파일이 어디에 있는지 알아야 하며, 설정 파일에서 이를 entry속성으로 명시한다. 웹팩은 이 entry속성에 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 번들 파일을 만든다. entry속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로이다.

// webpack.config.js
module.exports = {
  entry: './src/index.js'
}

위 코드는 웹팩을 실행했을 때 src폴더 밑의 index.js을 대상으로 웹팩이 빌드를 수행하는 코드이다.

🤔 Entry 파일에는 어떤 내용이 들어가야 하나?

entry속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다.

웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져 있어야 한다.

 

예를 들어, 블로그 서비스를 웹팩으로 빌드한다고 했을 때 코드의 모양은 아래와 같을 수 있다.

// index.js
import LoginView from './LoginView.js';
import HomeView from './HomeView.js';
import PostView from './PostView.js';

function initApp() {
  LoginView.init();
  HomeView.init();
  PostView.init();
}

initApp();

사용자의 로그인 화면, 로그인 후 진입하는 메인 화면, 그리고 게시글을 작성하는 화면 등 웹 서비스에 필요한 화면들이 모두 index.js파일에서 불려져 사용되고 있기 때문에 웹팩을 실행하면 해당 파일들의 내용까지 해석하여 파일을 빌드해줄 것이다.

🤔 Entry 유형

entry는 아래와 같이 여러 개로 설정할 수도 있다.

entry: {
  login: './src/LoginView.js',
  main: './src/MainView.js'
}

위와 같이 entry를 분리하는 경우는 싱글 페이지 애플리케이션이 아닌 특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태의 멀티 페이지 애플리케이션에 적합하다.