[webpack] 웹팩(webpack), 웹팩(webpack)의 구성요소

양다혜·2021년 9월 25일

FE Basic

목록 보기

3/6

웹팩(Webpack)

GitHub 가 소개하는 webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

⇒ webpack은 모듈 번들러(묶음체)이다. 브라우저에서 자바스크립트 파일들을 묶어서 사용하는 것을 목적으로, 어떠한 자원(js, css, png, jpg)이나 자산 등을 전송, 구축, 패키징이 가능하게 만드는 유용한 도구이다.

즉, webpack은 브라우저 상에서 자바스크립트 코드로 구성된 프로그램을 실행할 때 이에 필요한 자원들을 프로그램의 목적에 맞게 '모듈(Module)화'된 내용으로 제공해주는 것

구성 요소

1) Entry

JavaScript (또는 HTML, CSS, png) 파일로 이루어진 여러 모듈들을 포함하고 있는 파일을 정의할 때 사용

만약 애플리케이션이 App.js라는 파일 내부에 선언된 여러 모듈들로 실행된다면, App.js가 webpack의 Entry 파일

→ 각 모듈들이 바라보는 최상위 자바스크립트 파일(App.js)를 중심으로 번들링 되는 것

→ 선언 방법 : 루트 경로(node_modules이 설치된 directory)에 webpack.config.js 파일 생성해서, 내부에 정의

// 파일명: webpack.config.js
module.exports = {
		entry: "./App.js",
}

2) Output

webpack의 번들링 결과물을 어디에 만들어낼 것인지, 어떤 이름을 만들 것인지 정의할 때 사용

→ 선언 방법: Entry와 동일한 루트 directory에 dist 폴더 생성해두고, bundle.js라는 이름으로 output 지정

// 파일명: webpack.config.js
module.exports={
	entry: './App.js',
	output: {
			path: './dist',
			filename: 'bundle.js'
	}
}

3) Loader

webpack은 js 또는 JSON만 이해 가능한데, 이외의 다른 타입(HTML, CSS, png 등)의 파일들을 webpack이 이해할 수 있도록 변환해주는 역할

module.exports={
	entry: './App.js',
	output: {
			path: './dist',
			filename: 'bundle.js'
	},
	module: {
		rules:[ 
			{
				test: /\.txt$/, // 적용할 파일의 타입 선언
				exclued: /node_modules/, // 로더 적용 제외
				use: 'raw-loader' // 적용할 로더 정의
			}
		]
	},
}

4) Plugin

번들링(Bundling) 된 결과물에 대해서 적용할 수 있는 속성 - 난독화를 하거나, 번들된 css, js 파일들을 html 파일에 주입하는 역할

로더(Loader)의 경우, 파일 단위로 작업이 이루어짐

module.exports={
	entry: './App.js',
	output: {
			path: './dist',
			filename: 'bundle.js'
	},
	module: {
		rules:[ 
			{
				test: /\.txt$/, // 적용할 파일의 타입 선언
				exclued: /node_modules/, // 로더 적용 제외
				use: 'raw-loader' // 적용할 로더 정의
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin(),
	]
}

webpack 장점

의존 모듈이 하나의 파일로 번들링되기 때문에 별도의 모듈 로더가 필요X
HTML 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움을 줄일 수 있음

<script src="/js/test.js"></script>
<script src="/js/api.js"></script>
<script src="/js/tags.js"></script>
<script src="/js/time.js"></script>
<script src="/js/search-box.js"></script>
<script src="/js/fragments.js"></script>
<script src="/js/testjs.js"></script>