Skip to main content

Webpack

Tistory Blog

Webpack

Webpack 이란?

Webpack은 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다.

웹 애플리케이션 개발 시 여러 개의 JavaScript 파일과 관련 리소스(이미지, CSS 등)들을 하나의 번들로 묶어줍니다.

Webpack은 의존성 그래프(dependency graph)를 생성하여 애플리케이션의 모든 모듈을 분석하고, 각 모듈을 번들에 포함시키는 작업을 수행합니다. 이러한 모듈 번들링 과정을 통해 애플리케이션의 성능을 최적화하고 모듈 간의 의존성을 관리할 수 있습니다.

Webpack은 많은 기능과 유연성을 제공합니다. 다양한 로더(loaders)를 사용하여 CSS, 이미지, 폰트 등과 같은 리소스 파일을 처리하고, Babel과 같은 트랜스파일러(transpiler)를 통해 최신 JavaScript 문법을 이전 버전으로 변환할 수 있습니다. 또한 플러그인(plugins) 시스템을 통해 추가적인 작업을 수행할 수 있으며, 개발 서버와 핫 리로딩(hot reloading) 등 개발 과정에서의 편의 기능도 제공합니다.

Webpack 설치

1.1Node.js 설치하기

https://nodejs.org/ko

Webpack을 사용하기 위해서는 Node.js가 필요합니다.

1.2 npm 초기화 설치하기

npm init or npm init -y
{
"name": "game",
"version": "1.0.0",
"description": "game javascript",
"main": "index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

1.3 Webpack 설치

npm install webpack webpack-cli --save-dev
{
    "name": "game",
    "version": "1.0.0",
    "description": "game javascript",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^5.83.1",
        "webpack-cli": "^5.1.1"
    }
}

1.4 Webpack.config.js 설정

npx webpack을 작성하면 파일이 번들링 됩니다.

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'js/[name].js'
    }

}

1.5 Webpack-dev-server 설정

npm install webpack-dev-server --save-dev
{
    "name": "game",
    "version": "1.0.0",
    "description": "game javascript",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^5.83.1",
        "webpack-cli": "^5.1.1",
        "webpack-dev-server": "^4.15.0"
    }
}

1.6 HTML 번들러 설정

npm install html-webpack-plugin --save-dev
"devDependencies": {
    "html-webpack-plugin": "^5.5.1",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0"
}

1.7 CSS 번들러 설정

npm install --save-dev style-loader css-loader
module: {
    rules: [
        {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
        },
    ],
},

1.8 CSS 파일 분리하기

npm install --save-dev mini-css-extract-plugin
"devDependencies": {
    "css-loader": "^6.7.4",
    "html-webpack-plugin": "^5.5.1",
    "mini-css-extract-plugin": "^2.7.6",
    "style-loader": "^3.3.3",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0"
}

Vite 란?

Vite는 Vue.js를 위한 빠른 웹 개발 빌드 도구입니다. Vue.js 프레임워크를 사용하는 개발자들에게 더욱 빠른 개발 경험을 제공하기 위해 설계되었습니다.

Vite는 기존의 웹팩과 달리 개발 서버에서 바로 모듈을 실행하는 기능을 가지고 있어, 빠른 개발 및 핫 모듈 리로딩(HMR)을 제공합니다.

일반적으로 웹팩은 번들링을 위해 모든 파일을 빌드하고 번들을 생성해야 하지만, Vite는 실제로 필요한 모듈만 로드하고 실행하여 초기 로딩 속도를 크게 향상시킵니다. 이는 개발 시간을 단축하고 개발자가 수정한 내용을 실시간으로 확인할 수 있도록 합니다.