[TIL] 웹팩(webpack)이란?

웹팩은 가장 대중적인 모듈 번들러이다.

여기서 번들러(bundler)는 무엇인가?

번들러의 탄생 배경

초기의 웹 페이지와 달리, 발전하며 큰 규모의 웹 서비스들이 생기면서 JS파일을 관리하기가 어려워졌다.

- 많은 자바스크립트 파일로 인한 느린 로딩

- 전연 범위를 갖는 많은 자바스크립트 파일의 중복 선언

- 수동적인 웹 개발 루틴 작업(파일, 이미지 압축/CSS 전처리기 변환 등)

이를 해결하기 위해 번들러가 나오게 되었다!

 

번들러의 장점

- 모듈 단위의 코드 작성

- 네트워크 병목 완화(최적화)

- 웹 개발 작업을 자동화

 

그렇다면 모듈 번들러(module bundler)는 무엇인가?

HTML, CSS, JavaScript, images, Font 등을 하나하나 모두 모듈이다.

모듈 번들러는 아래와 같이 많은 모듈들을 하나의 파일로 병합 및 압축해주는 것이다.

 

웹팩(webpack)에 대해

Entry

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

 

webpack.config.js

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

 

Output

생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려준다. 즉, 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다. 기본적인 출력 파일의 경우./dist/main.js로, 생성된 기타 파일의 경우에는./dist폴더로 설정된다.

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', // webpack으로 빌드한 파일의 이름
  },
};

• path.resolve()는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API이다.

Loaders

webpack은 기본적으로 JavaScript와 JSON파일만 이해한다. Loader를 사용하면 다른 웹 자원(HTML, CSS, images, font)들을 변환할 수 있도록 도와준다.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    // 모든 txt파일에 대해서 raw-loader를 사용해 변환해!
  },
};

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

Plugins

로더는 파일을 해석하고 변환하는데 사용하고, 플러그인은 해당 결과물의 형태를 바꿔주는 역할(번들을 최적화, asset관리, 환경변수 주입 등)을 한다.

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' })],
};

 

Mode

mode 파라미터를 development, production 또는 none을 설정하면 webpack에 내장된 환경별 최적화를 활성화할 수 있다.

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

• 기본값: production

 

(+웹팩이 실행될 수 있는 개발 환경을 구축하며 빌드 과정 확인하기)

 

https://webpack.js.org/api/

Introduction | webpack

https://joshua1988.github.io/webpack-guide/concepts/plugin.html#plugin

Plugin | 웹팩 핸드북