What is Webpack? 웹팩이란 무엇일까?

What is WebPack?

 

WebPack 은 브라우저에서 자바스크립트 파일들을 묶어서(번들링) 사용하기 위함이며, 어떠한 자원(js,css,png,jpg등)이나 자산 등을 전송,구축 패키징이 가능하게 만드는 도구이다.

 

---

2000년대 초 쯤만하더라도 정적인 페이지를 운영하는 형식이라 페이지가 변화할때마다

 

새로운 HTMl을 요청하여 화면을 그렸다. 그 당시엔 자바스크립트는 DOM을 조작하는 간단한 역할만 했기때문에 HTML에 script태그를 넣는것을 충분햇다.

 

요즘 SPA(single page application)은 하나의 HTML에 수백개의 자바스크립트 파일을 포함하기에 비중이 어마어마하게 커졌다.

 

자바스크립트 파일이 많아지면서 기존에 생성된 전역변수가 덮어지는 실수가 생기기도 하고 많은 양의 스크립트를 사용하기에 네트워크 병목현상이 생기는 등의 문제도 있었다.

 

 

예를들어 페이스북 같은 경우에

 

댓글달기를 하면 DB에 그 내용을 저장하고 좋아요및 부가기능들도 물론 DB에 저장을 할것이다.

 

이러한 기능들이 파일 내부에서 작성되어있다면 저겅도 1000줄이상에 방대한 코드가 될것이며 , 또한 가독성 및 추후에 어떤 부분에 기능을 개선할때도 그 어떤 부분과 관계없이 다른 기능들의 코드를 전부다 봐야하는 문제도 발생한다.

 

그래서 이러 저러한 기능들을 파일들로 따로 구성하는것을 '모듈화'라고 볼수있고 이러한 관점에서 프로그래밍을 하는것을 '모듈화 프로그래밍'이라고 한다.

 

하지만 위 모듈화 프로그래밍도 효율성이 좋다고만 볼수는 없으며, 소프트웨어가 커지면 커질 수록 각각의 세분화된 모듈들은 많아지고 이러한 모듈 단위의 파일들을 호출할때 신경써야하는 변수들의 스코프 문제, 그리고 호출하때 생겨나는 네트워크 쪽의 코스트도 신경써야한다.

 

그래서 이러한 문제들을 바탕으로 나온 것이 웹팩(webpack)의 번들링개념이다.

 

웹팩(webpack) 번들링

---

웹팩 번들링은 묶는다는 의미이고 모듈화된 자바스크립트를 묶어준다는 것이다.

 

그렇다면 이렇게 번들링을하면 무엇이 좋을까?

 

1) 이전에 방식에서는 각 파일들마다 서버에 요청을 하여 자원을 얻어와야 했었지만, 웹팩을 이용한 번들링은

 

같은 타입(html,css,js등)의 파일을 묶어서 요청/응답을 받기 때문에 네트워크 코스트가 줄게된다.

 

2) WebPack 4버전부터는 개발자모드,상품모드 두가지의 모드를 지원하여 production 모드로 번들링을 진행할경우, 코드 난독화,압축,최적화 작업을 한다. 한마디로 상용화된 프로그램을 사용자가 느끼기에 더욱 쾌적한 환경 및 보안까지 신경쓰면서 노출시킬 수 있다는 점이다.

 

3) WebPack의 주요 구성 요소 중 하나인 로더(Loader)가 일부 브라우저에서 지원이 되지않는 ES6 형식의 자바스크립트 파일을 ES5로 변환하여 사용할수 있게 만들어준다. 웹 개발을 할때 모든 브라우저에 대해 고려해야 하므로 WebPack 로더가 아주 큰역할을 한다는것을 볼수있다.

 

 

웹팩(webpack) 4가지 구성요소

---

 

1) Entry

자바스크립트(혹은 html,css,jpg 같은 다른 타입) 파일로 이러어진 여러 모듈들을 포함하고 있는 파일을 정의할때 사용되어진다. 만약 App.js라는 파일 내부에 선언되어진 여러 모듈들로 실행 되어진다면, App.js가 웹팩의 Entry파일인것이다.

 

즉 App.js는 최상위 자바스크립트 파일이고 이것을 중심으로 번들링 되어진다.

 

//* root(node_modules이 설치된 디렉토리)의 webpack.config.js

module.exports = {

	entry: "./App.js",
	
}

 

2) Output

Output은 Webpack의 번들링에 대한 결과물을 어디에 생성해 낼것인지, 그리고 어떤 이름을 만들건지 정의하는 요소이다.

 

//* Entry를 정의했던 동일한 webpack.config.js
//* 미리 root 디렉토리에 dist 폴더를 만들어두고, bundle.js라는 이름으로 output 지정.

module.exports = {

	entry: './App.js',
    	output: {
        
    		path: './dist',
                filename: 'bundle.js'
    	
        }

}

 

3) Loader

기본적으로 webpack은 JavaScript (html,css,png토 물론 포함) 및 JSON 파일 만 이해합니다. 로더를 사용하면 웹팩이 다른 유형의 파일을 처리하고이를 애플리케이션에서 사용하고 종속성 그래프에 추가 할 수있는 유효한 모듈 로 변환 할 수 있습니다.

 

즉, 웹팩이 이해할수있도록 해주는것이 로더의 역할이며, 또 위에서 말했듯이 ES6형식으로 작성된 자바스크립트를 ES5로 바꾸어 컴파일 시켜주는 바벨(Babel)이라는 로더도있다.

 

 

//* module 내부에서 로더에 대한 정의를 선언.
//* rules 내부의 test는 적용할 파일의 타입을 선언.(정규식 사용 가능)
//* 이어서, use는 test에 선언한 파일타입에 맞는 로더를 정의하면 된다.
//* exclude에는 로더 적용을 제외시킬 파일을 정의
//* (node_modules 디렉토리 내부에 있는 노드모듈까지 굳이 번들링 할 필요는 없기에....)

module.exports = {

	entry: './App.js',
    	output: {
        
    		path: './dist',
                filename: 'bundle.js'
    	
        },
        module: {
        
        	rules: [
            	
                	{
                		test: /\.txt$/,
                    		exclude: /node_modules/, 
                 		use: 'raw-loader'
                 	}
                
            	]
        
        },

}

4) Plugin

 

로더 같은 경우 위의 로더 선언코드에서 보듯 파일 단위로 작업이 이러우지는 반면, Plugin 같은경우 번들링된 결과물에 대해서 적용할 수 있는 속성이다.  예를 든다면, 번들링 된 js 파일에 대해 난독화(UglifyJsplugin사용)을 하거나, 번들된 css,js 파일들을 html파일에 주입 하는 역할들을 한다.

 

요약하자면,

# 차이점    loader는 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리     plugin은 해당 결과물의 형태를 바꾸는 역할을 하므로 번들링된 파일을 처리한다는 점   따라서, 번들된 파일을 압축할 수도 있고 파일 복사, 추출, 별칭 사용 등의 부가 작업 가능, 파일별 커스텀 기능을 위해 사용함

# 차이점    loader는 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리     plugin은 해당 결과물의 형태를 바꾸는 역할을 하므로 번들링된 파일을 처리한다는 점   따라서, 번들된 파일을 압축할 수도 있고 파일 복사, 추출, 별칭 사용 등의 부가 작업 가능, 파일별 커스텀 기능을 위해 사용함

 

//* 'plugin' 이 아닌 'plugins' 에 주의!
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

	entry: './App.js',
    	output: {
        
    		path: './dist',
                filename: 'bundle.js'
    	
        },
        module: {
        
        	rules: [
            	
                	{
                		test: /\.txt$/,
                    		exclude: /node_modules/, 
                 		use: 'raw-loader'
                 	}
                
            	]
        
        },
        plugins: [
        
        	new HtmlWebpackPlugin(),
        
        ]

}