💫 FN 개발자의 개발환경 이해와 실습 - 03 (entry / output)

웹팩은 여러개 파일을 하나의 파일로 만들어 주는 번들러(bundler)다. 하나의 시작점으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다. app.js 부터 시작해 math.js 파일을 찾은 뒤 하나의 파일로 만드는 방식이다.  번들 작업을 하는 webpack 패키지와 웹팩 터미널 도구인 webpack-cli를 설치한다.

$npm install -D webpack webpack-cli

설치 완료하면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생긴다. webpack과 webpack-cli가 있는데 둘 중 하나를 실행하면 된다. 여기서 사용된 -D는 개발용 dependencies다.

 

https://webpack.js.org/

 

웹팩을 실행 할 때에는 필수적인 옵션이 있다.

1. --mode => development, production, none이 있는데 개발환경이냐 운영환경이냐에 따라서 development, production을 설정한다.

• development : 개발용 정보를 추가할 때
• production : 운영에 배포하기 위한 것

 

js가 시작 (entry) 그리고 js, css, jpg, png로 아웃풋 해주는 그림이다.

2. 모듈의 시작점 : entry 라고 한다.

3. entry를 통해 모든걸 하나로 합치고 경로를 저장하는 것은 output 이라고 한다.

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

webpack의 mode는 개발용이고 entry(시작점)은 ./src/app.js 이며 이 모든걸 하나로 합치고 경로를 저장하는 최종 아웃풋은 dist/main.js에 담으라는 뜻이다. 웹팩은 이처럼 여러개의 모듈을 하나의 파일로 만들어주는 역할을 한다.

 

---

 

웹팩 설정 파일

웹팩 설정 파일명 [webpack.config.js] 또는 [webpackfile.js] 로 지정한다.

{
  "name": "fn_dev_env",
  "version": "1.0.0",
  "description": "<br>",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "leehyunju",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1"
  },
  "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^4.5.0"
  }
}

 

여기서 script안에 있는 build를 "webpack"으로 하면 현재 프로젝트에 있는 노드 모듈을 뒤져서 웹팩 명령어를 찾는다. 그럼 웹팩은 기본 webpack.config.js 파일을 읽어서 번들링을 해줄 것이다.