Webpack 이란?

안녕하세요.
제가 리액트를 시작하며 CRA를 이용해 개발환경을 설정했었는데 용량이 너무 크다는 단점에 직접 개발환경을 설정해보자 Webpack을 알아보게 되었습니다.

함께 웹팩이란 무엇인가를 알아보겠습니다.

Webpack이란?

웹팩은 모던 javascript 애플리케이션을 위한 정적 모듈 번들러입니다. 웹팩이 애플리케이션을 처리할 때, 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.

디펜던시 그래프
activity 사이의 종속성을 표현한 그래프. 애플리케이션에서 필요한 모든 모듈을 포함.

한 파일이 또 다른 파일에 의존할 때마다 웹팩이 그것을 종속적으로 취급한다는 점은, 웹팩이 코드가아닌 (이미지나 폰트같은)자산을 사용하고 자산을 애플리케이션에 종속적으로 제공할 수 있게한다.

웹팩은 디펜던시 그래프를 재귀적으로 빌드한 후, 모든 모듈을 브라우저로 로드되는 작은 번들로 묶음(보통 하나).

왜 webpack을 사용해야 하는가?

웹팩은 모듈을 작성할 수도 있고, 어떠한 포맷의 모듈도 지원하며, 리소스와 애셋을 동시에 처리가능합니다.
javascript 애플리케이션을 번들로 묶을 수 있는 도구이며 이미지,폰트등 다양한 애셋을 지원하도록 확장이 가능합니다.

핵심 개념

공식문서에 이 6가지의 핵심개념만 이해하면 웹팩을 시작할 수 있다고하네요.

• Entry(엔트리)
• Output(출력)
• Loaders(로더)
• Plugins(플러그인)
• Mode(모드)
• Browser Compatibility(브라우저 호환성)

Entry(엔트리)

엔트리 포인트는 웹팩이 내부의 디펜던시 그래프를 생성하려면 필요한 모듈입니다.
웹팩은 엔트리 포인트가 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아냅니다.

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js', //기본값은 ./src/index.js이지만 다른 포인트 지정가능
};

Output(출력)

output은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 웹팩에 알려주는 역할을 합니다.

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',
    //기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정됩니다.
  },
};

Loaders(로더)

웹팩은 기본적으로 js와 json파일만 이해합니다. 로더를 이용하면 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환해 애플리케이션에서 사용하거나 디펜던시 그래프에 추가합니다.

상위 수준에서 로더는 webpack 설정에 두 가지 속성을 가집니다.

1. 변환이 필요한 파일을 식별하는 test 속성
2. 변환을 수행하는데 사용되는 로더를 가리키는 use 속성

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: { //규칙을 정의할 때 rules가 아닌 module.rules 아래에 정의한다는 것을 주의
    rules: [{ test: /\.txt$/, use: 'raw-loader' }], //정규식 이용
  },
};

require ()/import 문 내에서 '.txt' 파일로 확인되는 경로를 발견하면 번들에 추가하기 전에 raw-loader를 사용하여 변환하시오.

Plugins(플러그인)

로더를 플러그인을 활용해 번들 최적화하거나, 자산을 관리하고 환경 변수 주입 등 광범위한 작업이 수행 가능하다.
플러그인을 사용하려면 require ()를 통해 플러그인을 요청하고 plugins 배열에 추가해야 합니다. 대부분의 플러그인은 옵션을 통해 사용자가 지정할 수 있습니다. 플러그인을 다른 목적으로 여러 번 사용하도록 new 연산자로 호출하여 플러그인의 인스턴스를 만들어 설정할 수 있습니다.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],//생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성
};

Mode(모드)

mode 파라미터를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있습니다. 기본값은 production 입니다.
모드별 기능 : https://webpack.kr/configuration/mode

module.exports = {
  mode: 'production',
};

Browser Compatibility(브라우저 호환성)

Webpack은 ES5가 호환되는 모든 브라우저를 지원합니다(IE8 이하는 지원되지 않습니다).