💻 Webpack

이번 챕터는 웹팩에 대해 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

webpack

자바스크립트 애플리케이션을 위한 정적 모듈 번들러이다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다. webpack.config.js에 정의하면 node.js의 가져오기, 내보내기를 이용한다.

왜 웹팩이 등장했을까?

1. 파일 단위의 자바스크립트 모듈 관리의 필요성

아래와 같이 두개의 파일이 같은 변수로 선언되어 있고 하나의 파일에서 두 자바스크립트 파일을 로딩한다고 한다면 중복 선언을 하게 되어 재할당되기 때문에 파일 단위로 변수를 관리할 수 없다.

// app.js
var num = 10;
function getNum() {
  console.log(num);
}

// main.js
var num = 20;
function getNum() {
  console.log(num);
}

이런 문제점에서 파일 단위로 변수를 관리할 수 있는 자바스크립트 모둘화에 대해 필요성을 느끼게 되었다.

2. 웹 개발 작업 자동화 도구
프론트엔드 개발을 할 때 텍스트 편집기에서 코드를 수정하고 저장한 뒤 브라우저에서 새로고침해야만 반영된 결과를 확인할 수 있었습니다. 이러한 일들의 자동화에 대한 필요성을 느꼈습니다.

3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
웹 사이트의 로딩 속도를 높이기 위해서 서버로 요청하는 파일 숫자를 줄이는 등의 노력을 해왔습니다. 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다. Code splitting같은 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있습니다.

Entry

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

// 웹팩 실행 시 src/index.js를 대상으로 웹팩이 빌드를 수행해라.
module.exports = {
	entry: './src/index.js'
}

Output

웹팩을 돌리고 난 결과물의 파일 경로를 의미한다. 객체 형태로 옵션들을 추가해주어야 한다.

// webpack.config.js
var path = require('path');
module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}

filename : 웹팩으로 빌드한 파일의 이름
path : 해당 파일의 경로
path.resolve(): 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 NodeJS API

Loader

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

// css-loader 적용 예시
// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      //해당 프로젝트의 CSS 파일에 대해서 CSS 로더를 적용하겠다는 의미
      {
        test: /\.css$/,
        use: ['css-loader']
      }
    ]
  }
}

test : 로더를 적용할 파일 유형
use : 해당 파일에 적용할 로더의 이름

로더 적용 순서
기본적으로 오른쪽에서 왼쪽 순으로 정렬된다.

// sass-loader => css-loader => style-loader 순으로 정렬
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

Plugins

웹팩의 기보적인 동작에 추가적인 기능을 제공하는 속성, 로더와 다르게 해당 결과물의 형태를 바꾸는 역할을 한다.

// webpack.config.js
var webpack = require('webpack');

module.exports = {
  plugins: [
    // 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
    new HtmlWebpackPlugin(),
  ]
}

🔥 느낀점

npm, webpack에 대해서 배우면서 퍼즐 조각이 흩어져 있던 것들이 점점 맞춰져 가는 느낌이 들었다. 어디선가 들어서 사용했던 것들이 왜 만들어졌고 어떤 방법으로 사용하는 것인지 새롭게 알게되었다. 얼마전에 webpack을 사용할 때 공부했었던 내용보다도 세세한 부분까지 알게되어서 새로웠다. 이래서 다들 웹팩 웹팩 하는구나~ㅎㅎㅋㅋㅋ

매일 강의를 밀리지 않고 들은지 2일째! 데브코스 끝날 때까지 밀리지 않고 꾸준히 하자! 텐션 끅복!으쌰🔥

Refer

프로그래머스 데브코스
웹팩 핸드북 - 웹팩을 가장 쉽고 빠르게 배우는 방법

정리

Day37