프론트엔드 개발환경 웹팩(2)

📍 지난 시간에 웹팩이 등장한 배경에 대해서 간단히 알아보았다. 모듈이 등장했지만 표준모듈 시스템이 아직 모든 브라우저에서 동일하게 잘 적용되는 환경이 갖추어지지 않은 탓에 웹팩이 등장하게 되었다고 설명했다.

2. 엔트리 / 아웃풋

아래 이미지는 웹팩 공식홈페이지에 있는 이미지다. 웹팩을 가장 잘 설명해주는 이미지 같다.

앞에서 살펴본 것처럼 src/math.js에 sum이라는 함수를 만들고 src/app.js라는 파일에서 import를 통해 sum함수를 불러와서 사용한다.

상자 왼쪽에 위치한 화살표로 엉켜진 파일들이 서로 의존관계를 가지고 있다는 걸 뜻한다

그렇지만 상자 오른쪽을 살펴보면 단 한개의 js, css, jpg, png 파일로 합쳐진 것을 볼 수 있다.
이것이 웹팩의 역할이다. 모냐고?

웹팩은 여러개 파일을 하나로 합쳐주는 번들러이다

하나의 시작점(entry point)로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어낸다.

이제 간단히 웹팩으로 번들링을 해보자.

$ npm install -D webpack webpack-cli

webpack과 webpack-cli를 설치해보자.

--mode,--entry,--output-path 세 개 옵션을 사용하면 코드를 묶을 수 있다.

$ node_modules/.bin/webpack --mode development --entry ./src/app.js --output dist

• --mode는 웹팩 실행 모드를 의미한다.
• --entry는 시작점 경로를 지정하는 옵션이다.
• --output-path는 번들링 결과물이 위치할 경로다.

번들링이 완료되었다는 메시지가 나온다. 그러면서 dist/main.js가 생겼다.

index.html을 열어보면 동일하게 잘 동작함을 알 수 있다.

번들링을 할 때 위 3가지 옵션이 아니라 더 다양한 옵션들을 추가할 수 있다. 그 때 마다 긴명령어를 입력하긴 번거로우니 웹팩 설정파일을 만들어 따로 관리해보자.

webpack.config.js

const path = require('path');

module.exports = {
  mode :'development',
  entry : {
    main : './src/app.js' 
  }
  output : {
    path : path.resolve('./dist'),
    filename : '[name].js',
  }
}

✨ output에 설정한 [name]은 entry에 추가한 main이 문자열로 들어오는 방식이다.
✨ output.path는 절대 경로를 사용하기 때문에 path라는 모듈의 resolve() 함수를 사용해서 계산한다.

마지막으로 package.json 파일의 스크립트부분을

{
  "scripts": {
    "build": "./node_modules/.bin/webpack"
  }
}

수정하고 npm run build해주면! 똑같이 번들링 작업을 해준다.

👍 김정환님 블로그를 토대로 작성된 포스팅입니다.