✍모듈 번들러 / Webpack

생활코딩 webpack 강의를 참고하여 작성하였습니다.

🌈 모듈 번들러(module Bundler)

 

모듈(module)이란, 프로그래밍이라는 관점에서 기본적으로 '본체에 대한 독립된 하위 단위' ( 즉, 프로그램을 구성하는 구성요소 중 하나의 구성요소의 단위를 이야기 한다.)

 

웹 애플리케이션의 규모가 점차 커지면서 파일의 양도 점점 커져 발생하는 문제점들이 생겨났는데,

모듈간의 스코프가 구분이 되지 않아 다른 파일에 영향을 끼치는 일이 발생하고 또, 파일의 양이 많아지면서 많은 파일을 응답하는데 다소 많은 시간이 소요되는 일이 발생하기도 하였습니다. 

이와같은 문제들을 해결하기 위해 번들러(Bundler) 가 등장하게 된 것입니다.

 

즉, 모듈 번들러는 여러개로 나뉘어 있는 파일들을 하나의 파일로 묶어주는 역할을 함으로써 위와같은 문제들을 해결해 주는 역할을 합니다.

대표적으로 webpack, parcel, browserify가 있습니다.

오늘은 webpack에 대해서 알아보겠습니다.

 

🌈 Webpack

 

1. webpack이란?

webpack은 자바스크립트 프로그램을 위한 정적 모듈 번들러 입니다.

프로그램을 처리할때 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성합니다. 

(구동되는 방법은 그대로 하되, 내부의 코드를 더 효율적으로 바꿔주는 것 이라고도 할 수 있습니다.

 

2. webpack 의 개념

✍Entry 

모듈 웹펙이 내부 구축 시작을 사용해야하는 시작을 의미합니다. (기본적으로 값은 ./src/index.js) 

✍Output 

구축을 시작하여 방출하는 곳을 의미하며, 번들 파일의 생성과 이름을 지정합니다.

기본 파일은 ./dist/main.js 으로 지정됩니다. 

 

✍Loader

기본적으로  webpack은 JavaScript 및 JSON 파일 만 을 이해합니다. 

하지만 Loader를 사용하면 웹팩이 다른 유형의 파일을 처리하고 이를 애플리케이션에 사용하고 종속성 그래프에 추가 할 수있는 유효한 모듈 로 변환 할 수 있습니다.

 

✍Plugin

로더는 특정 유형의 모듈을 변환하는데 사용되지만 플러그인을 활용하여 번들 최적화 , asset 관리 및 환경 변수 삽입과 같은 광범위한 작업을 수행합니다.

 

3. webpack 설치방법

1. node.js로 프로젝트 선언 (package.json이 다운로드된다)

   *package.jason은 프로젝트에 관한 설명이 들어있다.*

npm init

 

2. webpack / webpack-cli package 설치하기

npm install -D webpack webpack-cli

 -D 옵션은 dependencies (배포용) devDependencies (개발용)이 있는데, 개발용 옵션을 사용할때 입력한다.

 

설치가 완료되면, 아래와 같이 package.json에 webpack과 webpack-cli가 설치된 것 을 볼 수 있다.

  "devDependencies": {

    "webpack": "^5.37.1",

    "webpack-cli": "^4.7.0"

  }

 

 

3.  webpack 실행하기

npx webpack --entry ./source/index.js --output-path ./public/index_bundle.js

// ./source/index.js 에서 시작해서 그 파일이 사용되고 있는 모든 파일들을 하나로 번들을 만들어서
// ./public/index_bundle.js로 출력해라 

 

 

 

 

위 명령어로 실행하면 ./public/index_bundle.js 경로에 main.js가 생성된 것 을 볼 수있다.

 

 

 

 

 

🖐 create-react-app 으로 webpack 을 설치 할 때는?

기본 Webpack 설정들이 되어 있기때문에 설정들을 보기 위해서는 eject해아한다. 

npx run eject

 

 

 

 

<참조 자료>

 

https://webpack.js.org/concepts/

Concepts | webpack