웹팩(Webpack) - 엔트리와 아웃풋

 

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의

 

모듈

모듈부터 이야기해봐야 한다.

문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터이다.

 

이전에는 index.html에서 각각의 파일을 올려서 사용했었다.

하지만 이러하면 전역 스코프가 오염된다는 문제점이 있다.

=> 예측할 수 없어지게됨. 런타임 에러가 발생

 

이러한 점을 극복하기 위해 IIFE(Immediately Invoked Function Expression)의 방식을 사용하게 되었다.

전역 스코프 오염을 예방할 수 있다.

(function() {
	function sum(a, b) {
    	return a + b;
    }
    
    // math모듈 외부에서 사용할 수 있도록
    math.sum = sum;
})()

 

자바스크립트 모듈을 구현하는 대표적인 명세가 AMD와 CommonJS다.

CommonJS: exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식. Nodejs에서 이를 사용한다.

AMD: 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표다.

UMD: AMD기반으로 Common JS방식까지 지원하는 통합 형태이다.

 

이후에 ES2015에서 표준 모듈 시스템을 내 놓았다.

math.js

export function sum(a, b) { return a + b; }

app.js

import * as math from './math.js';
math.sum(1, 2); // 3

 

<script type="module" src="app.js"></script>

모든 브라우저에서 모듈 시스템을 지원하지 않는다.

크롬에서뿐만 아니라 모든 브라우저에서 모듈 시스템을 사용하려 한다면 웹팩이 나올 시점이다.

 

웹팩

모듈로 개발하게 되면 왼쪽 그림처럼 모듈 간의 의존관계가 생긴다.

하나의 모듈인 자바스크립트에서 다른 모듈을 import하는 방식이다.

 app.js는 math.js를 가져오기 때문에 "의존관계가 있다"라고 표현한다.

웹팩: 모듈로 연결된 여러 개의 자바스크립트 파일을 하나로 합쳐주는 역할을 한다.

이렇게 하나로 합쳐진 파일을 번들이라고 부른다. 웹팩은 번들을 만드는 번들러라고도 부른다.

 

웹팩 설치 명령어

npm install -D webpack webpack-cli

 

npm install -D는 개발용 패키지를 설치하는 것이다(devDependcies).

그렇지 않은 경우엔 dependencies에 설치가 된다.

 

웹팩과 웹팩 cli를 설치하면 node_modules 안에 .bin 폴더에 웹팩과 웹팩cli가 설치되있는걸 확인할 수 있다.

웹팩이나 웹팩 cli로 터미널에서 실행할 수 있다.

 

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

첫째, --mode이다.

development, production, none이다.

개발환경인지, 운영환경인지에 따라 설정한다.

개발용 정보를 추가하려면 development

운영/배포를하기 위해 최적화 설정하려면 production 설정을 주면 된다.

 

둘째, 모듈의 시작 부분을 엔트리 또는 엔트리 포인트라고 부른다.

 

셋째, 엔트리를 통해서 웹팩의 모든 모듈을 하나로 합치고 그 결과를 저장하는 경로를 설정하는 옵션이 아웃풋이다.

 

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

웹팩 아웃풋으로 만든 파일을 경로로 설정해주고 type="module"을 지워준다.

 

--config 웹팩 설정파일을 지정할 수 있다.

기본 파일명: webpack.config.js

 

const path = require('path');

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

아웃풋은 path와 filename 두 개가 들어온다.

아웃풋 경로는 절대경로를 사용한다.

filename은 번들링된 파일명을 입력한다.

[name]으로 설정한 이유는

entry가 여러개일 수 도 있기 때문에 이에 맞는 아웃풋이 여러개 있어야하는데, 아웃풋을 동적으로 만들 수 있는 효과가 있다.

 

package.json의 scripts의 build에 "webpack"을 설정하면, npm은 현재 프로젝트의 node_modules에서 웹팩 명령어를 찾는다.

그러면 웹팩은 webpack.config.js를 읽게된다.

npm run bild를 하면 node_modules/ ~~~ --output dist/main.js를 하지 않아도 된다.

 

마지막으로 정리하자면, 엔트리는 자바스크립트 모듈이 여러 개가 의존관계가 있는데 첫번 째 시작점을 의미한다.

웹팩은 엔트리를 기준으로 모든 모듈들을 찾아서 하나의 파일로 번들링한다. 번들링한 결과를 아웃풋으로 설정한다.