Webpack 설정하기

서론 : 웹 애플리케이션의 성능과 관리성을 높이기 위해 번들러를 사용하는 것은 중요합니다. Webpack과 같은 도구들은 개발자에게 효율적인 코드 배포와 최적화된 사용자 경험 제공의 길을 열어줍니다.

1. 번들러의 의미

번들러(bundle)는 여러 파일과 모듈을 하나의 파일 또는 여러 개의 파일로 묶어주는 도구를 의미합니다. 웹 애플리케이션은 수 많은 자바스크립트, CSS, 이미지 파일 등의 자원들로 구성되며, 이러한 자원들을 효율적으로 로드하고 관리하기 위해 번들러를 사용합니다.

2. 번들러의 종류

다양한 번들러들이 있습니다. 주요한 것들을 몇 가지 소개하면:

Webpack: 현대적인 JavaScript 애플리케이션을 위한 가장 널리 사용되는 모듈 번들러입니다.
Rollup: ES6 모듈을 중심으로 한 작은 라이브러리 및 애플리케이션을 위한 번들러입니다.
Parcel: 설정 없이 빠르게 작동하는 웹 애플리케이션 번들러입니다.
Browserify: Node.js 스타일의 require를 사용하여 브라우저에서 JavaScript 파일을 번들링하는 도구입니다.

3. Webpack의 장점

• 유연성: 다양한 로더와 플러그인을 통해 자바스크립트, 이미지, 스타일 등 여러 유형의 파일을 처리할 수 있습니다.
• 코드 분할: 여러 번들을 생성할 수 있어, 초기 로드 시 필요하지 않은 코드는 지연 로딩이 가능합니다.
• 트리 쉐이킹: 미사용 코드를 제거하여 최종 번들의 크기를 줄일 수 있습니다.
  개발 서버와 핫 모듈 교체: 실시간 코드 변경과 빠른 개발 환경을 제공합니다.
• 커스터마이징: 웹팩의 설정을 통해 프로젝트의 필요에 맞게 번들링 과정을 세밀하게 조정할 수 있습니다.

4. Webpack 설정 예

웹팩은 현대 자바스크립트 어플리케이션을 위한 모듈 번들러입니다. 웹팩 설정 파일에는 어떻게 번들링할지에 대한 정보가 들어있습니다. 아래는 제가 오직 javascript, css, html로 만드는 프로젝트에 적용한 webpack.config.js 입니다

	const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        modules: [path.resolve(__dirname, 'src'), 'node_modules']
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    devServer: {
        static: './dist',
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        inject: true
    })]
};

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

path: 노드의 경로 모듈로서, 파일 및 디렉토리 경로를 조작할 수 있게 해줍니다.
HtmlWebpackPlugin: HTML 파일을 생성해주는 플러그인입니다. 번들된 자바스크립트를 자동으로 HTML에 주입합니다.

module.exports = {
    mode: 'development',

mode: 웹팩의 모드를 설정합니다. 'development' 모드는 소스맵을 생성하고, 최적화를 위한 여러 플러그인을 활성화하지 않습니다.

    entry: './src/index.ts',

entry: 애플리케이션의 진입점입니다. 여기서부터 의존성 그래프를 구축하기 시작합니다.

	module: {
		rules: [

module.rules: 모듈의 로딩 방법을 정의하는 로더의 배열입니다.

		//test: 처리할 파일의 패턴을 정의하는 정규 표현식입니다. 여기서는 TypeScript 파일을 의미합니다.
		//use: 지정된 파일 패턴에 대해 사용할 로더입니다.
		//exclude: 로더가 처리하지 않아야 할 파일 또는 디렉터리를 정의합니다.
	         {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
		//CSS 파일을 로딩하고 처리하기 위한 로더입니다.
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
		//이미지 파일을 로딩하기 위한 로더 설정입니다.
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },

    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        modules: [path.resolve(__dirname, 'src'),											'node_modules']
   			 },

resolve: 모듈 해석 방법을 설정합니다.
extensions: 확장자를 지정하지 않았을 때 웹팩이 해석하는 확장자 리스트입니다.
modules: 모듈을 찾을 디렉토리를 지정합니다.

output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },

output: 번들링 결과물의 출력 방식을 설정합니다.

plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        inject: true
    })]
};

plugins: 웹팩의 기능을 확장하는데 사용되는 배열입니다. 여기서는 HtmlWebpackPlugin을 사용하여 index.html을 생성하고, 번들링된 자바스크립트를 주입합니다.

위 설정을 바탕으로 웹팩을 실행하면 TypeScript, CSS, 이미지 파일 등이 적절하게 처리되어 dist 폴더에 번들링된 결과물이 생성됩니다. 이 설정은 기본적인 웹팩 사용법을 담고 있으므로, 필요에 따라 추가적인 플러그인이나 로더, 최적화 옵션 등을 추가하여 더 복잡한 설정을 만들 수 있습니다.

REFERENCE
https://webpack.kr/concepts