Webpack 소개와 사용법 ( webpack.config.js 작성 )

---

 

 

Module

프로그램을 구성하는 구성요소와 관련된 데이터와 함수를 하나로 묶은 단위

 

전통 자바스크립트 개발 방식은 기능별 또는 페이지별로 js 파일을 분리하고 

html에서 <script> 태그로 로드하는 방식이었다.

하지만 이 방식은 의존성이 있는 코드 사이에 순서를 보장하기 어렵고

( import 하는 여러 파일간에 동일한 이름을 갖는 변수를 만들 수 없음 - 충돌 )

일부 파일에 문제가 발생했을 때 전체 스크립트를 실행하지 못할 수 있다.

이러한 문제를 하기위해 나온 것이 모듈 단위의 개발이다.

 

 

 

 

bundler

의존성 있는 모듈 코드를 하나 또는 여러 파일로 만들어주는 도구로

브라우저 환경에 잘 실행될 수 있도록 가공해 준다.

즉 웹을 구성하는 파일들을 하나의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만든다.

 

만약 bundler가 없다면 여러 타입으로 구성된 많은 리소스 파일이 사이트 로딩 후 모두 다운되며

많은 파일의 다운로드는 웹 로딩의 속도저하로 이어지게 된다.

이러한 문제를 해결하기 위해 나온 것이 번들러이며 여러 번들러 중 하나가 아래서 설명할 webpack인 것이다.

 

 

 

 

Webpack

webpack은 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러로

하나의 시작점으로부터 의존적인 모듈을 전부 찾아 하나의 파일(의존성 그래프)로 만들어준다.

+React의 경우 CRA를 사용하여 구성할 때 자동 설치가 된다.

 

webpack의 장점

- Common JS, AMD, ES6 Module 포맷 모두를 지원한다.

- 여러 리소스를 압축하여 최적화하기 때문에 로딩에 대한 네트워크 비용 감소 효과를 가져온다.
- 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 
- 최신 자바스크립트 문법을 지원하지 않는 브라우저에서도 사용할 수 있다. 
- 개발자가 개발 작업의 빌드 시스템을 완전히 컨트롤할 수 있으며 이를 통해 모던 프론트엔드 웹 개발 생태계를 더욱 잘 이해할 수 있다.

 

번들러 사용의 문제점과 webpack의 해결 방법

- 번들러의 사용으로 많은 리소스가 하나의 파일로 병합되면 초기 로딩 비용이 커질 수 있다. 
         -> 이러한 이슈에 대해 웹팩은 청크, 캐시, 코드 스플릿과 같은 기능을 도입하여 해결하였다.

 

webpack의 단점

- 비교적 복잡한 configuration
- 개발 모드 속도

         -> Webpack 5에 새로 추가된 caching 옵션을 통해 개선되었다고 본다)

 

 

 

 

Webpack 사용하기

 

1.  webpack 설치

node.js가 설치되어 있다는 가정하에 아래 명령어를 입력해 주면 된다.

-D를 추가하는 이유는 개발환경에 쓰이는 라이브러리로 설치 시 package.json 파일 안에서 devDependencies에 설치되도록 하기 위해서이다.   기록되게

npm i webpack -D

//Webpack4 이후 버전인 경우 cli를 같이 설치해야 커맨드라인에서 사용 가능
npm install --save-dev webpack-cli

 

 

 

2. webpack.config.js 파일 생성하기

해당 파일을 통해 webpack의 사용자 정의를 설정할 수 있다.

// Node.js 모듈 path 불러오기
const path = require("path");
// css파일을 별도 파일로 추출하는 플러그인
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports={

    plugins: [new MiniCssExtractPlugin({
        filename:"css/style.css",
    })],
    
    //수정된 사항을 보고 파일을 업데이트 시켜준다.
    //해당 파일에서 설정을 하지않고 CLI환경에서 -w를 추가한 뒤 실행시켜도 된다.
    watch:true,

   //처리해야할 파일들의 위치 
   //[name] : 파일주소
    entry:{
        main:"main.js",
    },
    
    //해당 파일에 설정을 하지않고 CLI환경에서 --mode=설정값을 추가한 뒤 실행시켜도 된다.
    mode:"development",
    
    //처리 결과를 저장할 장소와 파일명 설정
    //여기서 [name]은 entry 설정 시 파일주소 왼편값 
    output:{
        //파일명 설정
        filename:"js/[name].js",
        //파일 위치 설정, 절대경로가 필요
        path:path.resolve(__dirname,"folder-name"),
        //새로운 파일 생성시 이전 폴더를 삭제하도록 설정
        clean:true,
    },
    
    module:{
        rules:[
            {
            //test : 파일 식별을 위한 속성
                test:/\.js$/,
            // 변환시 필요한 로더를 설정하는 속성
                use:{
                    loader:'babel-loader',
                    options: {
                        presets: [["@babel/preset-env", { targets: "defaults" }]],
                    },
                }
            }
            ,
            {
                test: /\.scss$,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            }
            
        ]
    }
};

 

 

위의 코드에서 설정된 entry, output, loader, plugins, mode에 대해 알아보자

 

 

Entry

엔트리 포인트는 webpack이 빌드될 때 최초의 진입점이자, 의존성 그래프의 시작점이라고 생각하면 된다.

페이지가 여럿으로 나뉜다면 여러 개의 엔트리 포인트를 설정할 수  있다.

 

 

Output

아웃풋은 웹팩을 사용하고 난 뒤 결과물에 대한 설정을 하는 곳으로

path는 결과물의 위치를, filename은 파일의 이름을 설정하는 요소이다.

이때 나온 파일을 script로 연결하여 사용하면 된다.

중요한 점은 결고물의 위치는 절대경로여야 한다.

 

 

loader

webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다.

그러나 loader를 사용하면 webpack이 다른 유형의 파일을 처리하거나,

그들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 의존성 그래프에 추가시킨다.

 

- loader 종류 

    babel-loader : 브라우저가 이해하는 js로 변환

    sass-loader : scss확장자 파일을 브라우저가 이해할 수 있는 css 파일로 변환시킨다.

    css-loader : @import, url()등의 최신형 css 코드를 브라우저가 이해할 수 있는 코드로 변환시켜 동작할 수 있도록 한다.

    style-loader :  변환시킨 css 코드를 DOM 내부에 적용시켜 준다.

*위의 코드를 사용해 scss를 css에서 변환하기 위해서는 scss파일은 js파일에서 import하고 있어야함 

 

loader에 대한 더 많은 내용은 아래 사이트를 참고해 보자

(loader 사용을 원한다면 아래 사이트를 참고해 각 loader를 install 해줘야한다.)

Webpack 로더 - Webpack 러닝 가이드

 

 

plugins

webpack을 위한 확장 기능으로 넓게 보면 번들 최적화, 에셋 관리, 환경요소 주입 등의 일들에 있어서 도움을 준다.

플러그인을 사용하려면 해당 플러그인을 설치하고 require ()를 통해 플러그인을 요청한 뒤 plugins 배열에 추가해야 한다.

 

 

mode

빌드 때에 맞는 상황에 맞추어서 최적화 요소를 제공해 주는 webpack 4 버전에 생긴 기능으로

production(배포모드) 와 development(개발모드) 가 있고 디폴트 값은 production이다.

 

 

 

3. package.json 파일에 명령어 추가

webpack을 실행시키기 위한 명령어를 추가해야 한다.

명령어 이름은 어떠한 것을 해도 상관없다.

"asset": "webpack -w "
"asset": "webpack --mode=development"
"asset": "webpack --mode=development -w"
"asset": "webpack --config webpack.config.js"

 

 

 

만들어진 파일을 사용하기위해서는 서버관련 파일에 해당

 

 

 

 

 

webpack과 관련해 AMD, CommonJS, 모듈화의 역사를 잘 설명해 놓은 글이 있어 첨부한다 👏🏻

https://ingg.dev/webpack/

[JS] Webpack을 쓰는 이유

 

 

참고

https://ingg.dev/webpack/

https://webpack.kr/concepts/#entry

https://subtlething.tistory.com/116

 

 

 

---