entry와 output

entry

entry란 웹팩에서 웹자원을 변환하기 위해 최초로 진입하는 곳이자 번들링하고자 하는 자바스크립트 파일 경로와 이름을 적는 곳이다.

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

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

그림으로 나타내면 다음과 같다.

 

위와 같이 모듈 간의 의존관계가 생기는 구조를 dependency graph라고 하며 코드로 나타내면 다음과 같다.

 

// index.js

import {item} from './item.js';
import {upload} from './upload.js';
import {signup} from './signup.js';

function mainPage() {
  item();
  upload();
  signup();
}

mainPage();

 

// webpack.config.js

module.exports = {
  //...
  entry: './src/main/resources/static/index.js'
  //...
}

 

하지만 앞의 경우와 다르게 entry에 들어갈 파일이 1개가 아닌 여러개가 될수도 있다.

왜냐하면 해당 프로젝트가 SPA가 아니고 평범한 멀티페이지 어플리케이션일 수도 있고 프로젝트의 특성에 따라서 여러 개의 html파일을 쓸 때도 있기 때문이다.

이런 경우는 entry라는 식별자의 값을 객체로 하여 복수의 파일들을 임의의 key로 관리할 수 있다.

 

// webpack.config.js

module.exports = {
  //...
  entry: {
  	index : './src/main/resources/static/index.js',
  	about : './src/main/resources/static/about.js'
  }
  //...
}

 

이제 entry에 입력한 파일들을 번들링할 때 어디에 생성하여 저장할지 결정하는 output에 대해 설명하고자 한다.

 

output

output은 번들링하고자 하는 파일을 프로젝트의 어디에 생성하고 저장할지 설정하는 곳이다.

여러 js파일을 웹팩에 적용하여 번들링하는 방법은 webpack.config.js의 entry에서 객체를 만들어 key를 임의로 설정하고 각 key에 번들링하고자 하는 js파일을 입력하였고 우리는 이제 번들링 파일을 생성하고 저장할 방법을 알아야 한다.

우선 output의 filename에서 번들링된 파일의 이름을 설정할 수 있다.

이때 약속된 변수인 [name]을 입력하면 entry에서 번들링하고자 하는 파일경로와 이름을 값으로 갖고 있는 임의의 key가 [name]에 대입되어 새로운 번들링 파일이 생성된다.

예 : entry의 임의의 key가 'about'인 경우 번들링 파일의 이름은 about_bundle.js이며 아래와 같이 표현할 수 있다.

 

// webpack.config.js
const path = require('path')

module.exports = {
  //...
  output: {
    // ...
    path: path.resolve(__dirname,'src/main/resources/static/dist'),
    publicPath: '/dist/',
    filename: '[name]_bundle.js',
  }
  //...
}

 

위의 변수 path에 담겨져 있는 path라는 라이브러리는 현재 내가 변수로 사용하고 있는 파일의 절대경로를 일일이 입력할 필요 없이 쉽게 자동 설정해주는 기능을 해주는 라이브러리이다.

path.resolve(인자1, 인자2)를 설명하자면 첫번째 인자에서 __dirname은 현재 이 파일을 포함하고 있는 폴더의 절대경로를 자동으로 설정해주며 두번째 인자에는 그 이후의 경로를 적어주면 된다.

흔히 번들링된 파일을 dist폴더에 저장하도록 하고 있다.

이 문법은 사실 nodeJS에서 자주 쓰는 문법이며 번들링된 파일을 생성하여 저장하는 경로를 설정하는데 편리하다.

 

한편 output의 publicPath와 path의 차이는 다음과 같다.

path는 번들링된 파일이 위치할 파일의 절대 경로를 의미한다.

publicPath는 브라우저가 url을 통해 참고할 번들링 결과 파일의 주소를 의미한다.

이렇게 앞뒤로 '/dist/'와 같이 /를 추가하면 서버가 예를 들어 'https://google.com/dist' 아래에 있는 번들링 파일을 참고한다는 것이다.

한편 html파일에는 번들링이 된 파일의 이름을 아래의 src에 할당하기위해 입력해야 한다.

 

<script src= "/dist/index_bundle.js"></script>

 

webpack.config.js를 통해 웹팩 실행방법

이제 번들링할 파일과 번들링된 파일을 생성하여 저장할 곳을 설정했으니 웹팩을 실행하여 번들링 파일을 생성하고자 한다.

터미널에 npm run webpack --config webpack.config.js를 입력하면 된다.

단, 웹팩을 실행하기 위해서 모듈 파일을 webpack.config.js로 파일명을 했을 경우 npm run webpack이라고만 해도 된다.

하지만 다른 이름으로 파일을 생성했을 경우 npm run webpack --config {모듈파일명}으로 컴파일 명령을 입력해야 한다.

 

자동으로 웹팩 컴파일하는 방법

npm run webpack --watch 혹은 npm run webpack -w로 입력하면 그 다음에는 터미널에 일일이 입력하지 않고 src에 있는 파일을 수정하고 저장하면 자동으로 변경사항을 웹팩이 감지하여 컴파일을 자동으로 실행한다.