WEBPACK이란?

WEBPACK

오픈 소스 자바스크립트 정적 모듈 번들러로, 호환 플러그인 포함 시 HTML, CSS, 이미지 등의 프론트엔드 자산을 변환할 수 있다.

즉, Webpack은 각각의 모듈 (HTML, CSS 등 웹 구성 자원)을 조합해 여러 파일을 하나의 결과물로 만드는 자바스크립트 모듈 번들러이다.

 

사용하는 이유

성능 최적화와 자동화

• 여러 파일을 각각 컴파일 하는 것과 여러 파일을 번들링 하여 하나의 파일로 만들어 컴파일 하는 것의 속도 차이는 크다.
• 코드 축소와 사용하지 않는 코드를 제거하는 등의 최적화 기능을 가지고 있고, 이를 통해 HTTP 요청 수를 감소해 웹 사이트 성능을 향상한다.

번들러 제공 편의성

• CSS의 단점을 보완한 SCSS나 웹 확장 프로그램인 Stylus, JS에 타입을 부여한 TypeScript를 사용하는 프로젝트라면 번들러가 컴파일 과정에서 필요한 플러그인을 추가하고 실행한다.

Code Splitting

• Webpack의 매력적인 기능 중 하나인 코드 스플리팅 Code Splitting을 통해 코드를 다양한 번들로 분할하거나, 필요나 요청에 따라 로드하거나, 병렬로 로드할 수 있다.
• 더 작은 번들을 만들고 리소스 우선순위를 올바르게 제어하는 등 Code Splitting를 사용한다면 로드 시간에 큰 영향을 줄 수 있다.

Module Federation을 통한 종속성 문제 해결

• Module Federation은 JS의 아키텍처로, 가장 최신 버전인 webpack 5 부터 제공되는 기능이다.
• 이 기능은 여러 개의 개별 빌드가 단일 애플리케이션을 형성할 수 있도록 한다. 이는 개별 빌드를 컨테이너처럼 작동하고, 빌드 간에 코드를 노출하고 소비하여 단일 통합 애플리케이션을 생성할 수 있게 한다.

 

 

webpack.config.js

아래는 webpack 설정 파일이다.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 추가
 
const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        open: true,
        host: 'localhost',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title : "web game",
            filename : "index.html",
            template: 'index.html',
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: './asset', to: './asset'}
            ]
        })  
    ],
    module: {
        rules: [
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            },
        ],
    },
};
 
module.exports = () => {
    config.mode = 'development';
    return config;
};

 

 

상세 설명

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 추가

require()를 통해 필요한 모듈을 가져온다.

• path : Node.js의 기본 모듈로 파일 및 디렉터리 경로를 조작할 때 사용한다.
• HtmlWebpackPlugin : Webpack 플러그인. 빌드 과정에서 HTML 파일을 생성하거나 기존 HTML 파일을 템플릿으로 사용해 빌드 결과를 포함시킨다.
  • 즉, HTML도 빌드될 수 있도록 하는 플러그인이다.
• WorboxWebpackPlugin : PWA 지원을 위한 플러그인. 서비스 워커를 생성해 캐싱 및 오프라인 지원 기능을 제공한다.
• CopyWebpackPlugin : 파일이나 디렉토리를 빌드 결과물에 복사한다.

 

  const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        open: true,
        host: 'localhost',
    },

• entry : Webpack이 번들링을 시작하는 진입점을 지정한다.
  • 번들링 할 시작 파일로, 해당 파일에 import된 파일들을 webpack이 따라가면서 모두 번들링한다.
• output : 번들링된 파일이 저장될 디렉토리 및 파일명을 지정한다.
  • 현재 설정은 현재 디렉토리 기준으로 dist 디렉토리를 생성하여 그 안에 번들링된 파일을 저장한다.
  • 즉, dist를 배포용 디렉토리로 사용하겠음을 의미한다.
• devServer : Webpack Dev Server 설정 -> 코드가 변경될 때마다 자동으로 컴파일해준다.
  • open : true -> 개발 서버가 실행되면 브라우저를 자동으로 연다. (false : 열지 않음)
  • host : 'localhost' -> 개발 서버의 호스트를 localhost로 설정한다.

 

    plugins: [
        new HtmlWebpackPlugin({
            title: "web game",
            filename: "index.html",
            template: 'index.html',
        }),

 

• HtmlWebpackPlugin
  • title : 생성될 HTML 문서의 title 태그를 설정한다.
  • filename : 생성될 HTML 파일의 이름을 지정한다. 이를 통해 dist/index.html이 생성된다.
  • template : 기존 HTML 파일을 템플릿으로 사용한다. 여기서는 루트 디렉토리의 index.html 파일을 템플릿으로 지정함을 의미한다.

 

        new CopyWebpackPlugin({
            patterns: [
                { from: './asset', to: './asset' }
            ]
        }),

 

•  CopyWebpackPlugin
  • patterns : 복사 작업의 규칙을 정의한다.
    • from : 복사할 소스의 경로를 의미한다. 여기서는 ./asset 디렉토리를 복사함을 의미한다.
    • to : 복사된 파일이 저장될 경로를 의미한다. 여기서는  ./dist/asset을 의미한다.

 

    module: {
        rules: [
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            },
        ],
    },

 

• module: rules : 파일을 처리하기 위한 로더를 설정한다.
  • test : 처리할 파일의 확장자를 정규식으로 지정한다. 여기서는 글꼴이나 이미지 파일을 대상으로 한다.
  • type : 'asset' -> Webpack 5에서 제공하는 새로운 모드로, 파일을 자동으로 인라인 처리하거나 별도의 파일로 복사한다.
    • 인라인 Inline 처리 : Webpack이 파일을 읽어들였을 때, 파일의 크기가 작으면 Base64로 인코딩되어 자바 스크립트 코드에 포함한다.
      • 만약, 이미지 파일 (a.png, 2kb)을 번들링하게 되면 Base64로 인코딩되어 JavaScript 코드에 포함된다.
      • 결과적으로 번들 파일은 아래와 같아진다.
      • ex) const a = 'data:image/png;base64,...'; // Base64 문자열 
    •  별도 파일로 복사 : 동일한 상황에서, 파일의 크기가 크면 별도의 파일로 복사되고 해당 파일의 경로가 번들 파일에 포함된다.
      • 만약, 이미지 파일 (b.png, 10kb)을 번들링하게 되면 아래처럼 별도의 복사된 파일의 경로가 포함된다.
      • ex) const b = '/dist/b.png'; //복사된 파일 경로

 

module.exports = () => {
    config.mode = 'development';
    return config;
};

 

• module.exports를 통해 Weppack 설정을 외부에서 사용할 수 있도록 내보낸다.
  • config.mode : Webpack 모드를 개발 모드로 설정한다. 해당 모드의 경우, 개발 생산성을 높이기 위한 모드이기 때문에 디버깅이 쉽고 속도가 빠르다.

 

WEBPACK 참고

webpack 홈페이지

Webpack이란 무엇인가? 정의와 필요성, 그리고 장단점

webpack 설정하기