Webpack이란?

웹팩에 대해 가장 잘 이해할 수 있었던 영상이었다.

 

웹팩에 대해 알아보기 전 우선 모듈과 모듈 번들러에 대해 알아야 한다.

모듈이란?

코드의 재사용성과 유지보수 측면에서 파일을 여러 개로 분리하여 개발을 하게 되는데 이러한 파일들을 모듈이라고 한다.

 

모듈 번들러란?

사용자가 브라우저를 통해 웹사이트에 접근을 하면 브라우저는 사용자들에게 UI를 보여주기 위해 웹서버에 HTML, CSS, Javascript와 같은 자원을 요청하게 된다. 웹서버는 준비된 자원들을 브라우저에게 응답해줌으로써 사용자들이 UI를 볼 수 있다. 여기서 모듈의 개수가 많다면 브라우저가 요청해야 하는 모듈의 개수가 많아지게 되고 이러한 네트워크 비용의 증가는 페이지 로딩 시간을 증가시켜 사용자 경험 측면에서 좋지 않다.

이 점을 해결하는 방법은 브라우저에서 서버로 요청하는 HTTP 개수를 줄이는 것인데, 이를 위해 웹서버에 배포할 때 하나의 파일로 묶어주면 된다. 이렇게 여러 개의 모듈을 하나의 파일로 묶어주는 작업을 번들링이라고 한다. 이 작업을 해주는 도구를 모듈 번들러라고 한다. 모듈 번들러는 여러 종류가 있는데 웹팩이 바로 그 중 하나이다.

 

웹팩(Webpack)

[공식사이트]

webpack

설치

 

webpack을 로컬로 설치해보자.

웹팩을 설치하기 위해서는 Node.js와 npm은 이미 설치되어 있어야 한다.

npm init -y
npm install webpack webpack-cli --save-dev

webpack-cli는 터미널에서 webpack을 실행할 때 사용되는 도구이다.

webpack은 개발 환경에서만 사용하고 배포 시에는 필요없기 때문에 --save-dev 옵션을 붙인다. 이 옵션을 붙일 경우 package.json 파일 내의 devDependencied 항목에 설치할 모듈과 버전이 들어가게 된다. --production 빌드 시 해당 패키지는 포함되지 않는다.

 

Configuration

Webpack 4부터는 설정 파일을 설정할 필요가 없다. 기본적으로 webpack은 프로젝트의 엔트리 포인트를 src/index.js으로 가정하고, 번들링한 결과를 dist/main.js로 내보낸다. 그렇지만 사용자가 자기 입맛에 맞게 세부적인 설정을 하고 사용을 하려면 루트 폴더에 webpack.config.js 파일을 생성하면 webpack이 자동으로 이 파일을 사용하게 된다.

 

Webpack의 주요 Concept 5가지

1. Entry

• 웹팩이 빌드할 파일의 위치. 이 파일에 import되어 있는 모든 파일을 찾아내어 하나의 파일로 합쳐준다.
• 기본값은 ./src/index.js

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

 

2. Output

• 웹팩이 빌드한 파일을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려준다.
• 기본 출력 파일의 경우에는 ./dist/main.js로, 생성된 기타 파일의 경우에는 ./dist 폴더로 설정된다.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

상단에서 가져오는 path 모듈은 파일 경로를 지정하기 위해 사용되는 core Node.js 모듈, 즉 Node를 설치만 하면 쓸 수 있는 이미 만들어져 있는 내장 모듈이다.

 

3. Loader

• webpack은 기본적으로 Javascript와 JSON 파일만 이해할 수 있는데 Loader를 사용하면 webpack이 HTML, CSS, 이미지 파일과 같은 다른 유형의 파일들을 webpack이 이해하고 처리할 수 있는 파일로 바꿔준다.
• 로더는 2가지 속성을 가진다.
  • test : 변환이 필요한 파일
  • use : 변환을 수행하는데 사용되는 로더
• 예를 들어 로더를 사용하여 webpack에 css 파일을 로드하거나 Typescript로 변환하고자 한다고 한다면 다음과 같이 하면 된다.
  우선 필요한 로더를 설치한다.

npm install --save-dev css-loader ts-loader

그리고 나서 모든 .css 파일에 css-loader를 사용하고, .ts 파일에는 ts-loader를 사용하도록 webpack에 지시해준다.

 

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

이 때 주의할 점은 파일의 이름을 정규식을 이용하여 매칭할 때 따옴표를 사용하면 안된다. 만약 test에 "/\.css$/" 또는 '/\.css$/'와 같이 작성한다면 webpack에 절대 경로 '.css'를 가진 단일 파일만을 가리키게 된다. 따옴표 없이 /\.css$/ 이렇게 작성해주어야 .css로 끝나는 모든 파일을 처리해준다.

 

4. Plugin

• webpack의 기본적인 동작에 추가적인 기능을 제공하는 속성이다. 
• 번들을 최적화하거나, 애셋을 관리하고, 환경 변수 주입과 같은 광범위한 작업을 수행할 수 있다.
• 여러 모듈에 대해 로더와 다르게 번들링된 결과 파일에 대해 한 번만 실행된다.
• webpack은 설치없이 사용할 수 있는 많은 Plugin을 제공하고 있다. 그 목록은 여기에서 확인 가능하다. 

5. Mode

• 빌드할 때 사용할 모드를 선택하는 속성이다.
• development, production, none 중 선택할 수 있다. 기본값은 production이다.