Webpack은 웹 애플리케이션을 위한 정적 모듈 번들러(Static Module Bundler)입니다. 웹 애플리케이션을 구성하는 JavaScript, CSS, 이미지 등의 다양한 모듈들을 하나로 묶어서 번들로 생성해줍니다. 이를 통해 모듈 간의 의존성을 관리하고, 웹 애플리케이션의 성능을 향상시킬 수 있습니다.
React는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React는 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 컴포넌트 기반 접근 방식을 사용합니다. 이러한 방식은 애플리케이션의 복잡도를 줄이고 유지 보수성을 높이는데 도움이 됩니다. React는 가상 DOM(Virtual DOM) 개념을 사용하여 애플리케이션의 성능을 최적화합니다. React는 데이터가 변경될 때마다 전체 페이지를 다시 로드하는 것이 아니라 변경된 부분만 업데이트합니다. 이는 더 나은 사용자 경험을 제공하고, 빠른 애플리케이션 응답 속도를 유지하는 데 도움이 됩니다.
Webpack은 다양한 기능을 제공하여 웹 개발을 보다 효율적으로 할 수 있도록 도와줍니다.
Webpack은 JavaScript 기반으로 구성된 프로젝트를 주로 대상으로 하지만, 로더(Loader)와 플러그인(Plugin)의 도움으로 다른 언어나 프레임워크도 처리할 수 있습니다. 많은 개발자들이 웹 애플리케이션의 개발 및 배포 과정을 간소화하고 최적화하기 위해 Webpack을 사용합니다.
웹팩을 시작하기 전에 node.js를 설치해야 합니다.
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"
}
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"
}
}
npx webpack을 작성하면 파일이 번들링 됩니다.
const path = require('path');
module.exports = {
mode: 'production', //production, development
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/[name].js'
}
}
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"
}
}
npm install html-webpack-plugin --save-dev{
"name": "game",
"version": "1.0.0",
"description": "Game javascript",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.5.1",
"webpack": "^5.83.1",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0"
}
}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production', //production, development
entry: {
index: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/[name].js',
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html', //번들 전
filename: './index.html', //번들 후
hash: true,
showErrors: true,
})],
}
npm install --save-dev style-loader css-loader"devDependencies": {
"css-loader": "^6.7.4",
"html-webpack-plugin": "^5.5.1",
"style-loader": "^3.3.3",
"webpack": "^5.83.1",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0"
}
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
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"
}
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module: {
rules: [
{
test: /\.css$/i,
// use: ["style-loader", "css-loader"],
use: [MiniCssExtractPlugin.loader, "css-loader"],
exclude: '/node_modules/'
},
],
},
Vite는 Vue.js와 React를 포함한 현대적인 웹 프레임워크를 위한 개발 도구입니다. Vite는 번들링과 개발 서버 기능을 제공하여 빠른 개발 속도와 향상된 개발 경험을 제공합니다.
Vite의 핵심 아이디어는 "ESM(ES Modules) 기반 개발"입니다. 기존의 웹 개발 도구는 프로젝트를 번들링하여 개발 서버를 실행하고, 변경 사항이 발생할 때마다 전체 애플리케이션을 다시 빌드해야 했습니다. 이는 개발자들이 수정한 코드를 실시간으로 확인하는 데에 제약을 줄 수 있습니다.
Vite는 개발 시에 모듈을 실시간으로 로드하고 빠른 개발 환경을 제공하기 위해 빌드 없이 모듈 단위로 서버 사이드에서 처리합니다. 이를 통해 변경된 모듈만 다시 빌드하고 리로드할 수 있으므로 개발 속도가 향상됩니다.
Vite는 개발자들에게 빠른 개발 속도와 개선된 개발 경험을 제공하여 웹 애플리케이션 개발을 더욱 효율적으로 만들어 줍니다.