webpack 소개 및 사용 방법

1. webpack 소개

2. webpack 사용 환경 구축

3. webpack.config.js 파일 구성

---

1. webpack 소개

[그림 1] webpack 로고

자바스크립트(JS) 코드가 많아지면 하나의 파일로 관리하는데 한계가 있다. 하지만, 여러 개의 파일로 나누어서 브라우저에 렌더링한다면 그만큼 네트워크 비용이 생긴다는 단점이 있다. 뿐만 아니라 각 파일은 서로의 스코프를 침범하지 않아야 하는데, 잘못 작성할 경우 변수 충돌의 위험성도 존재한다.

 

웹팩(webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 그리고 이미지와 같은 프론트엔드 자산들을 변환할 수 있다.

 

웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다. 웹팩은 의존성을 취한 다음 의존성 그래프를 만듦으로써 웹 개발자들이 웹 애플리케이션 개발 목적을 위해 모듈 방식의 접근을 사용할 수 있게 도와준다. cli를 통해 사용할 수 있으며, "webpack.config.js"라는 이름의 구성 파일을 사용하여 구성할 수 있다. 이 파일을 사용하면 프로젝트를 위해 로더, 플러그인 등을 정의할 수 있다.

 

웹팩 설치에는 Node.js가 요구된다.

 

데이터 타입을 지정해 줄 수 있는 TypeScript 언어는 런타임이 없기 때문에 webpack과 함께 사용해야 한다. 이 경우 TypeScript 문법을 JavaScript로 바꿔서 Node.js로 실행해야 한다.

 

 

2. webpack 사용 환경 구축

먼저, 웹팩을 사용하고자 하는 프로젝트에서 아래의 명령어를 실행한다.

$ npm init -y

 

해당 프로젝트 안에 package.json 파일이 생성되었다면, 다음 명령어를 실행한다.

$ npm i react react-dom
$ npm i -D webpack webpack-cli

-D 옵션은 Developers의 약자로 개발자용 모듈을 설치하겠다는 의미이다.

 

설치가 완료되었다면, 프로젝트 안에 webpack.config.js 라는 파일을 생성하고, 아래 명령어로 디렉토리를 만든다.

$ mkdir src dist

 

추가적으로, 아래의 명령어로 babel과 관련된 패키지들을 설치한다.

$ npm i -D babel-loader @babel/preset-env @babel/preset-react

babel-loader는 webpack과 babel을 연결해주는 라이브러리이다. @babel/preset-env는 옛날 브라우저에서도 구동할 수 있게 코드를 바꿔주고, @babel/preset-react는 JSX 확장자 파일을 사용할 수 있게 해준다.

 

Node.js는 server.js 파일을 수정했을 때 node server.js 명령어를 다시 실행해야 브라우저에도 반영되어 나타났다. 이를 자동으로 감지해서 서버를 직접 껐다 켜지 않아도 되게 해주는 패키지인 nodemon을 사용하면 매우 편리했다.

 

웹팩에서는 src 디렉토리 안의 코드가 수정되면, npx webpack이라는 명령어를 실행해서 dist 디렉토리 하위의 bundle.js 파일을 덮어쓰기 해야 한다. 이때 nodemon과 같이, 자동으로 src 안의 코드 변화를 감지하여 bundle.js를 덮어씌워주는 서버 패키지가 있다. 그것이 바로 webpack-dev-server이고, 아래의 명령어로 설치할 수 있다.

$ npm i -D webpack-dev-server react-refresh @pmmmwh/react-refresh-webpack-plugin

react-refresh과 @pmmmwh/react-refresh-webpack-plugin을 설치하면, 브라우저에서 새로고침(F5)을 하지 않아도 자동으로 수정된 화면이 반영되어 나타난다.

 

css 확장자 파일을 번들링하기 위해서는 아래의 명령어를 실행하여 관련 패키지들을 설치한다.

$ npm i -D mini-css-extract-plugin css-loader

 

간혹 style-loader와 css-loader를 같이 설치하여 사용하는 경우 에러가 발생할 수 있다고 해서 css-loader만 설치하였다.

 

 

3. webpack.config.js 파일 구성

아래는 webpack.config.js 파일의 내용이다.

const path = require('path');
const webpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    name: 'react-project',
    mode: 'development',
    devtool: 'eval',
    resolve:{
        extensions:['.js', '.jsx', '.css']
    },
    entry:{
        app:['./src/index.jsx']
    },
    module:{
        rules:[{
            test:/\.jsx?/,
            loader: 'babel-loader',
            options:{
                presets:[   
                    ['@babel/preset-env', {
                        targets:{
                            browsers:['last 2 chrome versions', '> 5% in KR']
                        },
                        debug:true,
                    }],
                    '@babel/preset-react'
                ],
                plugins:[
                    'react-refresh/babel'
                ]
            },
        },{
            test:/\.css$/,
            use:[MiniCssExtractPlugin.loader, 'css-loader']
        },{
            test:/\.tsx$/,
            use:'ts-loader'
        }],
    },
    plugins:[
        new webpackPlugin(),
        new MiniCssExtractPlugin({filename:'style.css'})
    ],
    output:{
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist'
    },
    devServer:{
        static:{
            directory: path.join(__dirname, 'public'),
        },
        compress: true,
        port: 3000,
        hot: true,
        historyApiFallback: true,
    },
};

path는 내장 모듈이기 때문에 npm install로 설치할 필요가 없다. 또한, config 파일에서는 import를 사용할 수 없다.

 

이제 module.exports 객체에 담긴 속성들에 대해 살펴보겠다.

 

resolve의 extensions 속성은 사용할 수 있는 확장자를 추가해주기 위해 사용한다. '.js' 확장자 파일은 기본적으로 사용할 수 있지만, '.jsx'나 '.css'와 같은 확장자 파일을 번들링하기 위해서는 extensions에 추가해야 한다.

 

entry에는 내가 앞으로 묶어줄 파일들을 넣어준다. 이때 './src/index.jsx'의 파일에서 import 해오는 파일이 있으면 그 파일들을 모두 entry에 적어주지 않아도 알아서 불러와준다.

 

module에는 확장자가 '.jsx', '.css', 그리고 '.tsx'인 파일 별로 관련 설정에 대한 내용을 넣는다. 확장자가 '.jsx'인 파일에서는 babel을 사용하기 때문에 babel과 관련된 설정도 해주어야 한다.

 

plugins는 webpack의 부가적인 기능으로, 이를 사용하면 효과적으로 번들링할 수 있다. 예를 들면, 압축을 한다거나 파일을 복사하는 등의 부수적인 작업을 할 수 있다.

 

output은 번들링한 파일을 내보낼 위치와 그 파일명에 대한 설정이다. 위의 코드에서는 '/dist'라는 디렉토리 안에 bundle.js라는 이름의 파일로 내보냈다.

 

devServer는 webpack-dev-server 패키지에 관련된 설정이다. 위의 코드에서는 정적 파일들을 '/public' 안에 두고, 서버 포트 번호를 3000번으로 하였다.