웹팩이란?

※패스트 캠퍼스 강의 프론트엔드 개발 올인원 패키지를 참고하여 적은 것입니다.

🤷‍♂️웹팩이란?

웹팩이란 도구는 모듈(모듈을 모른다면?) 번들러입니다.

여기서 번들이란 말은 또 무엇일까요?

🔀번들링이란?

서로 참조 관계가 있는 모듈들 의존성을 지키면서 모은다음 하나의 파일로 묶는 과정을 말합니다.

그러면 이 번들이라는 과정을 왜 거칠까요?

🙋‍♂️번들이 중요한 이유

• 웹팩을 쓰면 모든 모듈을 로드하기 위해 검색하는 시간이 단축됩니다 한파일 안에 모듈들이 모두 담기기 때문에 파일에 접근하는 횟수가 줄어들어 한파일 내에서 모듈을 찾는 속도가 더 빨라지기 때문
  
• 사용하지 않는 코드를 제거해줍니다. 참조하는 코드들로만 이루어진 모듈로 바뀌기 때문
  
• 파일 크기를 줄여준다 파일이 한곳에 모여서 압축되기 때문
  

이런 이유 때문에 번들이 중요하게 쓰입니다.

🗂️웹팩의 기본 구조

entry & output

• entry : 모듈의 의존 관계를 이해하기 위한 시작점을 설정
• output : 웹팩이 생성하는 번들 파일에 대한 정보를 설정

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  target: "node",
};

※path : 아웃풋이 생기는 위치, filename : 아웃풋의 이름, target : 컴파일 하는 환경

Loader & Plugin

• loader : 의존관계를 갖는 다양한 타입의 모듈들을 입력받고 처리하는 역할

module.exports {
	...
	module: {
    rules: [
      {
        test: /\.css$/i, // 어떤 파일이 로더의 대상이 되는지를 지정(정규표현식 씀)
        use: [
          "style-loader",
          {
            loader: "css-loader", //css 처리하는 로더
          },
        ],
      },
    ],
  },
}

• plugin : 웹팩이 동작하는 자체적인 과정에 개입하여 번들 파일에 변화를 주고 개발 과정에서 편의성을 주는 역할

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports {
...
plugins: [
    new HtmlWebpackPlugin({ // 기본 html 파일 생성해주는 플러그인
      template: "./template.html", //기본으로 생성될 html파일 설정 
    }),
  ],

}

Chunk

내용을 계속 추가하면서 번들링을 하다보면 번들 파일 용량이 커져서 번들파일이 도착하는 시간이 지연됩니다. 이때 번들파일을 몇가지 기준으로 분리 시키는데 이 형태를 Chunk라고 합니다. 분리하는 기준은 여러가지가 있는데, 대표적으로 런타임 청크파일, 벤더 청크파일이 있습니다.

• 런타임 청크파일

런타임 환경에서 동작하는 코드들만 분리하여 넣어놓은 파일

• 벤터 청크파일

외부 패키지 코드들만 분리하여 넣어놓은 파일

Minification & Mangling

코드의 형태를 없애거나 치환시키는 형태로 최적화 시키는 과정을 말한다. 대상은 어플리케이션이 동작하는데 관여되지 않는 요소들이 해당됩니다. 예를들어 주석이나, 콘솔로그, 변수 등 이에 해당됩니다.

🪛마치며

웹팩에 대해 배워 봤는데, 잘 사용하면 성능을 크게 향상 시킬 수 있을 것 같아 보였습니다.다음은 웹팩을 한번 실제로 적용해 보겠습니다..!