[webpack] 3) 웹팩 주요 구성요소, [ Entry ] [ Output ] [ Loader ] [ Plugin ]

https://humanwater.tistory.com/2

[webpack] 2) 번들링(Bundling) 개념 및 사용 이유

이전 글에서 번들링(Bundling)에 대한 개념 및 사용 이유를 설명하면서 번들링에 필요한 웹팩의 구성요소에 대해 일부분(Webpack - Loader) 설명을 했었다.

그렇다면, 이번 장에는 당연히 이전에 말했던 웹팩의 구성요소를 포함한, 4가지 구성요소에 대한 설명을 하겠다.

( * 현재 가장 많이 사용하고 있는 Webpack 4버전 기준. )

 

 

 

1) Entry

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

즉, 각 모듈들이 바라보는 최상위 자바스크립트 파일(App.js)을 중심으로 번들링 되어진다고 보면 된다.

( * 선언방법은 어플리케이션의 루트 경로에 webpack.config.js 파일을 만들고, 그 내부에 정의하면 된다. )

 

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

module.exports = {

	entry: "./App.js",
	
}

[참고] https://webpack.js.org/concepts/entry-points/

Entry Points | webpack

 

 

 

2) Output

말그대로 웹팩의 번들링에 대한 결과물을 어디에 만들어낼 건지, 그리고 어떤 이름을 만들건지 정의하는 요소이다.

 

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

module.exports = {

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

}

[참고] https://webpack.js.org/concepts/output/

Output | webpack

 

 

 

3) Loader

웹팩의 핵심 구성요소인 로더(Loader)는 공식 홈페이지에 설명이 깔끔히 잘 나와있다.

 

   [참고] https://webpack.js.org/concepts/

 

위의 빨간색 박스를 보면, 로더는 오직 Javscript & JSON 파일만 이해가능하다고 나와있는데, 우리가 현재 사용하고 있는 대부분의 웹 어플리케이션 같은 경우 js파일이나 json파일 뿐만 아니라 html, css, png와 같은 정적타입의 파일들도 포함고 있는 것이 대부분이다.

 

그래서 이와 같은 다른 타입의 파일들을 웹팩이 이해할 수 있게 해주는 것이 바로 로더(Loader)의 역할인 것이다.

더 나아가서, 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

로더(Loader)와의 차별점을 두면서 설명이 가능할 것 같다. 로더 같은 경우 위의 로더 선언 코드에서 보듯이, 파일 단위로 작업이 이루어지는 반면, 플러그인(Plugin) 같은 경우 번들링 된 결과물에 대해서 적용할 수 있는 속성이다.

크게 예를 들면, 번들링 된 js 파일에 대한 난독화(UglifyJsPlugin 사용)를 하거나, 번들된 css, js 파일들을 html 파일에 주입(html-webpack-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(),
        
        ]

}

 

 

지금까지, 웹팩의 주요 구성요소인 Entry, Ouput, Loader, Plugin의 개념과 사용 방법에 대해서 알아보았다.

 

웹팩 4버전 부터는 Mode라는 속성이 지원되면서 별도의 설정파일 없이 Production 모드와, Development 모드로 빌드가 가능하게 되었다고 한다. 그리고 최적화 성능 향상으로 인해 앱의 반응 속도가 98%까지 올라갔다고 하는데, 자세한 내용은 아래 URL을 참고하면 좋을 듯 하다.

 

[참고] https://meetup.toast.com/posts/153

요즘 잘나가는 프론트엔드 개발 환경 만들기(2018): Webpack 4 : TOAST Meetup