개요

번들링과 웹팩에 대하여 알아보자.

번들링?

프론트엔드 개발자에게 번들은 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음" 으로 표현 할 수 있다.

👉 왜 번들링이 필요한가?

1. 많은 리소스를 다운 받을 수록 (서버와의 접속이 많을수록) 애플리케이션은 느리게 로딩된다.
   2.서로 다른 스크립트에서 같은 이름의 변수나 함수를 사용하는것을 방지한다.

웹팩?

가장 많이 사용되는 번들러 이다. 자바스크립트 뿐만아니라 css,이미지 등 과같은 여러가지 파일들을 모듈화 할 수 있다.

웹팩은 파일을 묶는 과정에서 여러가지 작업들이 실행되도록 작업 계획을 세워주기도 한다. sass, typescript, jsx와 같은 언어들을 네이티브 언어로 컴파일 해주거나, 개발 중에 파일이 수정 되었을 때 자동으로 브라우저의 내용을 리로드 해주는 등의 작업도 할 수 있다.

웹팩 실행시 webpack.config.js 파일을 참고하여 모듈화를 진행한다.
웹팩의 빌드(파일 변환) 과정을 이해하기 위해서는 아래 4가지 주요 속성에 대해서 알고 있어야 한다.

👉 entry

웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로이다.

// webpack.config.js
module.exports = {
  entry: './src/index.js'
}

엔트리 포인트는 1개가 될 수도 있지만 여러 개가 될 수도 있다. 싱글 페이지 애플리케이션이 아닌 특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태의 멀티 페이지 애플리케이션에 적합하기 때문에 앤트리 포인트를 분리하는 하기도 한다.

👉 output

웹팩을 돌리고 난 결과물의 파일 경로이다.

 // webpack.config.js
module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

👉 loader

로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성이다.

// webpack.config.js
webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },]
  }
}

엔트리나 아웃풋 속성과는 다르게 module라는 이름을 사용한다.

loader 가 필요한 이유

js 파일에서 css파일을 import 할 경우 웹팩으로 빌드하게 되면 에러(읽을수 없기 떄문에)가 발생한다.

npm i -D css-loader style-loader

이때 위와 같이 loader를 설치함으로써 에러를 해결 할 수 있다.

👉 plugin

플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다. 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 보면 된다.

플러그인은 아래와 같이 선언한다.

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ]
}

HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인

참고 https://joshua1988.github.io/webpack-guide/concepts/overview.html