Webpack

Webpack은 무엇일까?

웹팩은 여러 개로 나누어져 있는 파일(모듈)을 하나로 합쳐주는 번들러를 의미한다.

모듈?
여기서 모듈이란, 하나의 js파일, html파일, css파일들을 말한다. 우리가 만들어낸 여러 개의 파일이라고 생각하면 쉽다.

번들러?
여기서 번들러란, 우리가 일상생활에서도 쉽게 찾아볼 수 있다. 마트에 과자가 여러 개 묶여 있는 것을 번들이라고 한다. 이처럼 여러 개의 파일을 하나로 묶는 것을 번들이라고 생각하면 된다.

결론
웹팩은 모듈들을 하나로 합쳐주는 번들러 중의 하나이다.

웹팩을 쓰면 좋은 이유

작은 규모의 팀 단위로 모여서 프로젝트를 진행하더라도 하나의 페이지에서 만들어야할 컴포넌트 단위들이 정말 많다. 규모가 커졌을 때를 상상해보자. 페이지 하나당 컴포넌트가 10개씩만 나와도 페이지가 10개면 벌써 100개의 컴포넌트를 위한 파일이 필요하다. 파일을 요청해서 그것을 화면에 띄우는 것인데, 100개, 1000개가 넘어가면 그만큼 요청도 많아지고 시간도 많이 걸릴 것이다. 번들러인 웹팩은 이를 하나로 묶어서 이러한 문제를 해결해준다.

• 파일을 묶어서 요청하기 때문에 네트워크 요청의 수가 적어진다.
• 파일이 묶여서 압축이 되어 있기 때문에 로딩 속도가 빨라진다.

웹팩을 사용해보자!

1. 일단, 웹팩을 설치해주자!

npm install -D webpack webpac-cli
여기서 -D는 "devDependencies"를 의미한다. 운영 시에는 사용하지 않고 개발환경에서만 사용하는 모듈의 경우는 -D로 설치한다.
또한 webpack은 번들 작업을 하는 웹팩이고, webpack-cli는 웹팩 터미널 도구이다.
package.json에 위의 것들이 추가되어 있을 것이다.

2. 웹팩 터미널 도구로 옵션을 지정할 수 있지만 하나의 설정 파일로 관리하는 게 훨씬 편하다고 한다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
  },
  mode: 'development',
};

• entry : 엔트리는 입구라는 뜻이다. 즉, 시작점을 말한다. index.js를 기준으로 관련된 모듈을 찾아내어 결과물을 생성한다는 의미이다.

• output : 번들링한 결과물을 어디에 저장할 것이냐이다. output.path는 절대 경로를 사용하기 때문에 './dist'절대 경로를 반환하게 된다. filename은 결과물의 파일 이름이다.

3. 웹팩을 실행하기 위해 npm 커스텀 명령어 추가 단계이다.

package.json을 열어

{
  "scripts": {
    "build": "webpack --mode=production"
  }
}

를 추가하면 npm run bulid로 번들 작업을 할 수 있다.

4. 로더(loader)를 사용하자!
처음에 언급했던 것처럼, 모듈은 js파일만이 아닌 html, css, 이미지 등을 의미한다. 로더를 통해서 import 를 사용하면 js파일 안으로 코드를 가져올 수 있다.
로더는 타입스크립트를 자바스크립트로 바꿔주거나, 이미지를 data url 형태로 바꿔주는 역할을 한다.

// index.js

import './index.css';

인덱스 js 파일에서 css 파일 import 할 수 있다. 하지만, 이를 위해선 css를 모듈로 변환해주는 css-loader와 자바스크립트로 변경된 스타일을 돔에 추가하는 style-loader를 설치해야 한다.

npm install -D css-loader style-loader

그리고 여기에서 웹팩 설정을 담당하는 webpack.config.js에 로더를 추가해준다.

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // css로 끝나는 모든 파일들을요!
        use: ['style-loader', 'css-loader'], // css-loader를 적용하고 다음에 style-loader를 적용해주세요!
      },
    ],
  },
}

기본적인 웹팩의 사용 방법은 위와 같다. plugin을 통해 더 많은 기능들을 활용할 수도 있고, 이미지나 폰트들도 웹팩으로 묶어줄 수 있다.