[JS/Library] Webpack 이해하기 - 1 : 주요 용어

해당 글에서는 Module 번들과 Webpack에 대해 이해하고 webpack에 주요 옵션에 대해서 이해를 목적으로 작성한 글입니다.

 

 

1) 취지

---

💡 이전 React 프로젝트를 초기에 구성하고자 할 때 CRA(Create-React-App)를 통하여 프로젝트를 구성하였습니다. 해당 구성을 사용하게 된다면 초기의 webpack이나 babel에 대한 설정이 사전에 구현되어 신경을 쓸 일이 없었습니다.
💡 그런데 직접적으로 webpack을 설정할 필요가 생김에 따라서 이해하고 적용 방안에 대해 알아봅니다.
💡 참고로 CRA 환경에서 webpack과 babel을 구성하는 방법 또한 존재하여 아래에 [참고]로 공유를 합니다

 

1. [참고] CRA(Creat-React-App)으로 webpack / bable을 구성하는 방법 : eject

---

[ 더 알아보기 ]
💡 CRA의 eject 명령어 란?

- CRA 내에서도 webpack과 같은 파일들을 수정하는 방법이 존재합니다. 이는 기존 Webpack을 이용하는 방법 외에 CRA를 이용하는 방법에서는 Eject 명령어를 통해서 해당 숨겨진 파일을 찾고 사용할 수 있습니다.

# npm package manager
$ npm run eject

# yarn pacakge manage
$ yarn run eject

 

💡 CRA 프로젝트의 'eject' 적용 이전 패키지 구조

 

💡 CRA 프로젝트의 'eject' 적용 이후 패키지 구조

 

💡 CRA(Create-React-App)으로 프로젝트를 구성하면 종속된 ‘라이브러리’나 ‘설정 파일들’이 숨겨져 있습니다.
이를 확인 및 수정하기 위해서는 eject 명령어를 사용하면 됩니다.
💡 이미 개발이 된 프로젝트에서는 아래와 같이 크게 구조가 변경될 수 있고, 다시 이전(CRA)으로 돌아갈 수 없습니다. CRA 공식 사이트에서는 eject 명령어에 대해서 권장하지 않고 있습니다.

 

[참고] CRA의 eject 명령어 관련 공식 사이트

Available Scripts | Create React App

 

2) 모듈 번들러(Module Bundler)

---

💡 모듈 번들러(Module Bundler)

- 자바스크립트 파일을 기능 단위로 모듈화(Module)하고 이것을 하나 파일 혹은 여러 개로 묶어서(Bundle) 관리(병합/압축)하는 기능을 수행하는 것을 의미합니다.
- 해당 '모듈화'는 파일들의 의존성 관계를 정리하고 최적화하여 애플리케이션의 필요한 기능으로 모듈화를 수행합니다.
- 모듈화 대상 모든 리소스 또는 자산 (HTML, CSS, Image, Font 등…)이 이에 해당됩니다.

출처 : https://webpack.js.org/

 

3) webpack

---

💡 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은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 JavaScript 파일을 번들로 묶는 것이지만 거의 모든 리소스 또는 자산을 변환, 번들링 또는 패키징 할 수도 있습니다.

 

[출처] 공식 Github

GitHub - webpack/webpack: A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting all

 

4) webpack 주요 용어

---

📚 webpack 요약

---

주요 용어	설명
Entry	- 번들링을 시작하기 위한 최초 진입점의 자바스크립트 파일 경로를 설정하는 옵션입니다.
Output	- Entry에서 지정한 진입점을 바탕으로 결과물(Bundle)을 반환하는 설정을 하는 옵션입니다.
Loader	- 자바스크립트 파일 외에 다른 포맷(HTML, CSS, Image, Font 등..)의 파일을 처리하여 앱에서 사용 할 수 있도록 모듈로 변환 할 수 있도록 도와주는 옵션입니다.
Plugins	- Webpack의 기본적인 동작에 추가적인 기능을 제공하는 옵션입니다.
Resolve	- Webpack에 기본값을 제공하지만 상세하게 해석 방식을 변경에 대한 설정을 하는 옵션입니다.
Mode	- Webpack에 내장된 최적화 기능을 사용할 수 있는 옵션입니다.

 

1. Entry

---

💡 Entry 란?

- 번들링을 시작하기 위한 최초 진입점의 자바스크립트 파일 경로를 설정하는 옵션입니다.

// webpack.config.js
module.exports = {
	// config Style 1 - 단일 선택
	entry: './src/index.js',

	// config Style 2 - 다중 선택
	entry: ['./src/app.js', './src/main.js'],

	// config Style 3 - 속성(키)를 사용하여 하나 이상의 entry 선택
	entry: {
		app: './src/app.js',
	},
};

 

[참고] ‘Entry’의 더 많은 속성 알아보기

Entry Points | webpack

 

2. Output

---

💡 Output이란?

- Entry에서 지정한 진입점을 바탕으로 결과물(Bundle)을 반환하는 설정을 하는 옵션입니다.
- 결과물이 지정될 경로와 파일 이름을 지정합니다.

// Output Style 1 - path 모듈을 사용하여 경로 지정
const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.join(__dirname, '/dist'),
		filename: 'bundle.js',
	},
};

// Output Style 2 - 상대 경로를 사용하여 경로 지정
module.exports = {
	entry: './src/index.js',
	output: {
		path: '/dist',
		filename: 'app.bundle.js', // File
	},
};

 

속성 값	설명
output.path	결과물이 저징될 경로로 파일 혹은 디렉터리 경로로 작성합니다.
output.filename	결과물이 저장될 파일 이름을 작성합니다

 

 

💡 webpack을 수행시카묜 output 출력시 아래와 같이 출력이 됩니다.

 

 

[ 더 알아보기 ]
💡 require(’path’)란?

- Node.js에서 기본적으로 제공해주는 모듈로 위에서 사용한 path.join(__dirname, '/dist')는 여러 가지 경로를 합쳐 주는 용도로 사용합니다.

 

[참고] ‘Output’의 더 많은 속성 알아보기

Output | webpack

 

3. Loader

---

💡 Loader란?

- webpack은 기본적으로 Javascript와 JSON파일에 대해서 해석이 가능합니다.
- 자바스크립트 파일 외에 다른 포맷(HTML, CSS, Image, Font 등..)의 파일을 처리하여 앱에서 사용할 수 있도록 모듈로 변환할 수 있도록 도와주는 옵션입니다.

 

# Loader에서 사용된 라이브러리 
$ yarn add --dev babel-loader ts-loader file-loader css-loader style-loader file-loader

 

패키지	패키지 설명
babel-loader	Bable을 모듈로 변환하여 사용 할 수 있도록 도와주는 패키지 입니다.
ts-loader	Typescript를 모듈로 변환하여 사용 할 수 있도록 도와주는 패키지입니다.
file-loader	이미지 파일(png, jpe, jpg, gif)을 모듈로 변환하여 사용 할 수 있도록 도와주는 패키지입니다.
css-loader	CSS 파일을 모듈로 변환하여 사용 할 수 있도록 도와주는 패키지입니다.

 

module.exports = {
	// Loader : JS 파일 외에 파일들을 모듈로 변환.
	module: {
		rules: [
			{
				test: /\\.tsx?$/,
				use: ['babel-loader', 'ts-loader'],
			},
			{
				test: /\\.(png|jpe?g|gif)$/,
				use: ['file-loader'],
			},
			{
				test: /\\.css$/i,
				use: ['style-loader', 'css-loader'],
			},
		],
	},
};

 

[ 더 알아보기 ]
💡 Babel에 대해 더 이해하기
- 자바스크립트의 ES6 문법을 ES5로 변환해주는 트랜스 파일러(transpiler)입니다.

 

Babel 패키지	패키지 설명
babel-loader	바벨(babel)과 웹팩(webpack)을 연결 해준다.
babel/core	기본적인 바벨로 최신 문법으로 변환 해준다.
babel/preset-env	여러 환경에 맞게 JavaScript를 동작하게 해 준다.
babel/preset-react	리액트를 위한 플러그인 모음입니다.

 

[참고] ‘Loader’의 더 많은 속성 알아보기

Loaders | webpack

 

4. Plugins

---

💡 Plugins 란?
- Webpack의 기본적인 동작에 추가적인 기능을 제공하는 옵션입니다.
- Loader는 파일을 해석하고 변환하는 과정에 관여하는 반면에 플러그인은 해당 결과물의 형태를 바꾸는 역할을 합니다.

 

# 관련 Plugins에서 추가한 라이브러리
$ yarn add html-webpack-plugin html-webpack-plugin clean-webpack-plugin progress-webpack-plugin --dev

플러그인	플러그인 설명
html-webpack-plugin	웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
clean-webpack-plugin	웹팩으로 빌드한 폴더를 제거/정리하는 플러그인
progress-webpack-plugin	웹팩으로 빌드하는 진행율을 표시해주는 플러그인
webpack-bundle-analyzer	대화형 확대/축소 가능한 트리맵으로 웹팩 출력 파일의 크기를 시각화해주는 플러그인

 

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProgressPlugin = require('progress-webpack-plugin');
const BundleAnalzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
	// Plugins :  Webpack 추가 기능 구성
	plugins: [
		// Essential
		new HtmlWebpackPlugin({
			template: './public/index.html',
		}),
		new CleanWebpackPlugin(),

		// Optinal
		// new ProgressPlugin(true),
		// new BundleAnalzerPlugin(),
	],
};

 

[참고] ‘Plugins’의 더 많은 속성 알아보기

Plugins | 웹팩

 

5. Resolve

---

💡 Resolve 란?

- Webpack에 기본값을 제공하지만 상세하게 해석 방식을 변경에 대한 설정을 하는 옵션입니다.
- 여러 가지 옵션 중 extensions는 배열에 구성한 확장자를 순서대로 해석합니다. 여러 파일에서 이름이 동일하지만 다른 확장자를 가진 경우 webpack은 배열의 앞에서부터 파일을 해석하고 남은 것은 해석하지 않습니다.

module.exports = {	
	resolve: {
		extensions: ['.js', '.jsx', '.ts', '.tsx'],
	},
};

 

[참고] ‘Resolve’의 더 많은 속성 알아보기

Resolve | 웹팩

 

6. Mode

---

💡 Mode 란?

- Webpack에 내장된 최적화 기능을 사용할 수 있는 옵션입니다.
- 옵션의 종류는 'none' | 'development' | 'production'가 있습니다.
- 옵션을 선택하지 않으면 기본적으로 ‘production’가 설정이 됩니다.

 

💡 Mode의 속성 값 설명

Mode 속성	Mode 설명
none	- ‘설정안함’ 속성값으로 기본 최적화 옵션을 옵션으로 설정합니다.
development	- ‘개발 모드’ 속성값으로 개발자들이 좀 더 보기 편하게 웹팩 로그나 결과물이 보여집니다.
production	- ‘운영 모드’ 속성값으로 성능 최적화를 위해 기본적인 파일 압축 등의 빌드 과정이 추가됩니다.

 

// webpack.dev.js - 개발 모드
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const Dotenv = require('dotenv-webpack');

module.exports = merge(common, {
	mode: 'development',
});

// webpack.prod.js - 운영 모드 
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
	mode: 'production',
	devtool: 'hidden-source-map',
});

 

[참고] ‘Mode’의 더 많은 속성 알아보기

Mode | 웹팩

 

5) 구성 결과

---

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProgressPlugin = require('progress-webpack-plugin');
const BundleAnalzerPlugin =
	require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path');

module.exports = {
	// Entry : 진입점
	entry: {
		app: ['./index.tsx'],
	},

	// Loader : JS외의 파일들 모듈 변환
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: ['babel-loader', 'ts-loader'],
			},
			{
				test: /\.(png|jpe?g|gif)$/,
				use: ['file-loader'],
			},
			{
				test: /\.css$/i,
				use: ['style-loader', 'css-loader'],
			},
		],
	},
	// Output : 결과물(Bundle) 반환
	output: {
		filename: '[name].bundle.js',
		path: path.join(__dirname, '/dist'),
		clean: true,
	},

	// Plugins :  Webpack 추가 기능 구성
	plugins: [
		// Essential
		new HtmlWebpackPlugin({
			template: './public/index.html',
		}),
		new CleanWebpackPlugin(),

		// Optinal
		// new ProgressPlugin(true),
		// new BundleAnalzerPlugin(),
	],
	// Resolve: 상세 해석방법에 대한 기능 구성
	resolve: {
		extensions: ['.js', '.jsx', '.ts', '.tsx'],
	},
};

 

6) 결론

---

💡 Webpack의 주요 기능에 대해서 이해하였습니다.
다음은 왜 사용해야 하는지와 실제 폴더를 구성하고 설정하는 방법에 대해서 공부합니다.

오늘도 감사합니다. 😀