webpack이란?

Javascript 애플리케이션을 위한 모듈 번들러

모듈 번들러란 HTML, CSS, js, image 등 모든것을 모듈로 보고 조합해서 결과물로 만드는것

 

• wbapack 핵심 개념
• Entry (엔트리)
• Output (출력)
• Loaders (로더)
• Plugins (플러그인)

 

• 프론트 엔드 개발에 노드JS가 필요한것
• SASS 웹펙, 바벧 등 기능이 노드 JS기반에서 돌아간다.
• 또한 빌드 자동화를 위해 사용

설치했으면 npm 을 먼저 설치해줘야한다 (node package manager)

• npm init 으로 프로젝트 생성
• 1. cdn 방식 - 간편하지만 서버에 장애가 있을시 작동하지 않음
• 2. 직접다운 - 
• 3. npm 패ㅐ키지 다운

 

• npm 버전관리는 유의적 버전 관리를 따르게 된다.
• 2.0.0 -> 메이저. 마이너. 패치 (주, 부, 수) 
• 메이저 - 기존 버전과 호환되지 않는 API가 바뀌는 경우
• 마이너 - 기존 버전과 호환되면서 새로운 기능이 추가된 경우
• 패치 - 기존 버전과 호환되면서 버그를 수정한 경우

 

버전관리 범위 명시 법

• 1. 틸더 (tilde) : ~ 기호로 표시. 마이너 버전이 명시가 되었다면 패치버전을 갱신, 마이너 버전이 명시가 안되어 있다면 마이너 버전을 갱신
• 2. 캐럿 (Caret) : ^ 기호로 표시 마이너와 패치 버전을 갱신, 정식버전이 0이라면 패치만 갱신

 

 

웹팩(webpack)의 탄생 배경

• 브라우저 성능이 높아지고 유지보수의 난이도가 높아짐 ->
• 이를 해결 하기위해 js 기능단위로 분리해서 사용하는 코드의 모듈화가 필요했음
• ES2015 이후에 정식 지원하게된 모듈 시스템이 생김
• 하지만 IE는 지원하지않는다..

• 여러가지 파일을 하나로 만들어주는 것 
• 웹펙은 번들링을 해주는 번들러 이다.

 

wbpack 설치

npm install -D webpack webpack-cli

• -D -> 개발용 환경 구성, devDependencies에 기록 됩니다.

 

 

Entry와 Output 그리고 mode

 

• Entry, Output, mode 3가지 기능은 번들링 하기전 필수적으로 세팅

npx webpack --help

• npx -> 노드 패키지 실행자 엑스큐터 실행해주기

 

디펜더시 그래프

모든 의존점에 시작점 .js 이 엔트리 포인터라고 할 수 있다.

• entry : 모듈의 시작점을 설정한다. webpack이 내부의 디펜더시 그래프를 생성하기 위해 사용해야 하는 모듈 엔트리 포인트가 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낸다
• -o, -output-path <value> : 웹팩으로 생성되는 파일의 위치를 설정한다.
• --mode : 번들링 모드를 결정한다. Development 모드와 production 모드가 있으며 Production 모드의 경우 코드 최적화하여 용량을 줄인다. (Development 모드는 그대로 보여지는것, Production은 보기가 어려움)

웹팩의 entry, output 설정으로 다시 구현해보기

npx webpack --mode development --entry ./src/app.js -o ./dist

• 모듈은 파일프로토콜로 부를 수 없고 라이브서버로 켜야한다
• 명령문이 너무 길고 번거로우니 웹팩 설정 파일을 통해 간편하게 만들어 보겠음
• webpack.config.js 파일을 작성 후 package.json 파일을 수정해야한다
• ("bulid":"webpack") 이렇게 코드를 수정하고 npm run bulid 해봅시다

// node.js 문
const path = require('path');

// 운영체제별로 경로의 구분자가 다를 수 있다.
// path.resolve 안넣어도 되긴하는데
// 운영체제 호환성 맞추기 위해 resolve 해주었음
module.exports ={
    mode: 'development',
    entry: {
        main: path.resolve('./src/app.js')
    },
    output:{
    	// main에서 생길 이름이 들어온다
        filename:'[name].js',
        path:path.resolve('./dist')

    }
}

 

Loaders

• 웹팩은 js 만든 모듈뿐 아니라 css, html, images 등 모든것을 모듈처럼 다룰 수 있는데 이것을 가능케 하는것이 로더이다.
• 보통은 로더를 직접만들지는 않고
• 불러와서 사용한다
• img에 대한 해쉬값을 받아서 사용하는데 
• npm run bulid를 하면 적용이 된다.

            {
                test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|svg)$/,
                type: 'asset/inline'
            }

 

• 스프라이트 자동 변환 기법에 사용되면 매울 좋을것 같음