[React] Webpack에대해..

오늘 포스팅에서는 Webpack에대해 알아보겠습니다..

 

구글에 Webpack을 검색하면 설명란에 이렇게 나와있습니다..

웹팩은 오픈 소스 자바스크립트 `모듈 번들러`이다. 
주로 자바스크립트를 위한 `모듈 번들러`이지만 호환 플러그인을 포함하는 경우 
HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 
웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다

 

`모듈 번들러` 라는 설명이 나와있습니다.

설명에 앞서 모듈 번들러를 잘라서 설명드리자면

 

- 모듈 : 프로그램을 구성하는 구성요소로, 관련된 데이터와 함수를 하나로 묶는 단위입니다.

하나의 파일이 하나의 모듈이다 라고 생각하시면 될것같습니다.

 

- 번들러 : 의존성있는 모듈 코드를 하나의 파일로 만들어주는 도구 입니다.

MVC 패턴같은경우 controller.js / service.js / repository.js 정도로 생각하면 될것같습니다.

 

그럼 Webpack은 왜필요한가? - 필요는 발명의 어머니!

 

블로그 정리겸 구글링하다가 좋은 말이 있어 인용하였습니다.

https://www.hanl.tech/blog/webpack 님 블로그 인용

 

 

왜 Webpack을 사용해야 하는가는 바로 왜 웹팩이 만들어졌는지의 이유와 일치한다.
잠시 역사를 짚어보면, 약 2010년경부터 불붙은 
자바스크립트 프레임워크 전쟁을 통해 자바스크립트 웹 개발 추세가 치솟는 
추세에서 거침없는 모듈의 도입으로 애플리케이션이 눈덩이처럼 커지고, 
폭발적으로 변화 성장하는 프론트엔드 생태계의 미지의 바다에 휩쓸려 개발자가 작성하는 언어와 방법 종류도 브라우저들이
이해하기 벅찰 속도로 증가되었다.

 

위와같은 상황을 대처하기위해 나온것중 하나가 `번들러` 입니다!

 

그럼 기본 실행부터 알아보겠습니다.

 

# Webpack 기본실행

 

1. 관련 패키지 설치

npm init -y
npm install webpack webpack-cli

 

 

2. 프로젝트 구성

 

디렉토리를 구성해주시면 됩니다. 저는 src라는 폴더를 만들어, 그안에 index.js 파일을 만들었습니다.

 

3. Webpack 설정파일

 

- babel의 기본 환경설정을 도와주는 [ .babelrc ] 처럼

Webpack도 기본환경설정을 도와주는 파일명이 있습니다.

 

** webpack.config.js **

설정 파일 안에서의 기본설정을 해줍니다.

 

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

 

entry :: Webpack으로 번들링할 파일을 지정해줍니다

output :: 번들링 결과를 dist 폴더를 생성하여 bundle.js로 저장할것입니다.

( filename과 path를 적어줍니다 )

 

※ 추후에 다룰것이지만 module_rules 도 있습니다. 

module_rules는 Javascript 파일을 babel-loader가 처리하도록 설정하는것입니다.

babel-loader는 babel 설정 파일을 이용하므로 babel.config.js 파일의 내용이 설정값으로 사용됩니다.

 

 

4. 예제코드 작성하기

 

const React = require('react')
const ReactDOM = require('react-dom')

console.log(React)
console.log(ReactDOM)

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(React.createElement('div', null, 'hello World!'))

 

index.js 파일의 내용입니다. 아직 JSX를 사용하지 않으므로, React.createElement()를 통해

div를 생성해주고 'hello World'를 출력하였습니다.

 

 

5. Webpack 실행

 

npx webpack

 

 

npx webpack을 실행하면 dist 폴더안에 bundle.js 파일이 생성됩니다.

엄청난 외계어입니다... 하지만 html 파일을 만들어

<script type='text/javascript' src='./bundle.js'></script>

를 해주시면 브라우저에서 div안에 hello World가 출력되는것을 확인할수 있습니다.

 

---

 

간단하게 Webpack 사용을 알아보았습니다.

 

이번에는 Webpack Loader를 사용해보겠습니다.

 

Webpack 기본설정에 있는 Loaders 설정내용은 

다양한 유형의 파일을 모듈할수 있습니다.

 

아마 우리가 자주 사용할것인 CSS , Image 가 주로 될것인데

이번에는 Webpack Loader를 이용하여 CSS모듈을 번들링 해보겠습니다.

 

다섯가지 절차로 빠르게 해보겠습니다.

 

1. 관련 패키지 설치

npm init -y
npm install webpack webpack-cli css-loader style-loader

 

 

2. 프로젝트 구성

 

위와 똑같이 디렉토리를 구성하겠습니다.

src 폴더 안에 index.js와 index.css를 만들었습니다.

 

3. Webpack 설정파일

 

** webpack.config.js ** 

 

const path = require('path')
module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                user: ['style-loader', 'css-loader'],
            },
        ],
    },
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist'),
    },
}

 

위의 코드와 같이 entry설정을 index.js로 해주었고,output으로

filename은 bundle.js로 만들것이며, dist폴더에 생성하여

만들것입니다.

 

module.ruels의 코드를 말로 풀어 설명하자면

 

`` 웹팩 컴파일러야!

'test'에 지정된 파일형식을 발견하잖아?
그러면 번들에 넣기 전에 내가 'user'에 지정한 로더로 꼭 변환해줘야해~!``

 

정말 좋게 말로 표현하자면 이렇습니다!

 

 

4. 예제코드 작성하기

 

import './index.css'

console.log('hello world')

index.js

 

* {
    margin: 0;
    padding: 0;
    background: red;
}

 

index.css

 

 

 

5. Webpack 실행

 

npx webpack

 

하면 dist 폴더 안에 bundle.js 라는 파일이 생성됩니다.

위와같이 html에 붙혀서 사용하시면 css와 js가 합쳐진걸 볼수잇습니다.

 

---