웹스토리보이

Webpack은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러(Static Module Bundler)입니다.

웹팩은 여러 개의 JavaScript 파일과 종속성을 포함한 다른 리소스(스타일시트, 이미지 등)를 하나로 결합하여 최적화된 정적 파일(bundle)을 생성합니다. 이렇게 번들링된 파일은 웹 애플리케이션에서 사용되며, 로딩 및 실행에 필요한 최소한의 요청을 할 수 있도록 도와줍니다.

웹팩은 모듈 시스템을 지원하며, 의존성 그래프를 통해 애플리케이션의 모듈들 간의 관계를 파악합니다. 각 모듈은 웹팩 로더(Webpack Loader)를 통해 처리되며, JavaScript 외에도 CSS, 이미지, 폰트 등 다양한 리소스도 처리할 수 있습니다.

웹팩은 개발 과정에서도 매우 유용합니다. 개발 서버를 실행하여 변경 사항을 실시간으로 감지하고, 자동으로 다시 빌드하여 브라우저를 새로 고치지 않고도 개발 중인 애플리케이션을 빠르게 확인할 수 있습니다.

2.1 node.js 설치하기

웹팩을 시작하기 전에 node.js를 설치해야 합니다.

2.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"
}

2.3 webpack 설치

npm install webpack webpack-cli --save-dev

2.4 webpack.config.js 설정

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

const path = require('path');
module.exports = {
    mode: 'production', //development
    entry : {
        index: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: "js/[name].js"
    }
}

2.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"
    },
    "dependencies": {
        "pate": "^0.1.1"
    }
}

2.6 HTML 번틀러 설정

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": {
        "webpack": "^5.83.1",
        "webpack-cli": "^5.1.1",
        "webpack-dev-server": "^4.15.0"
    },
    "dependencies": {
        "html-webpack-plugin": "^5.5.1",
        "pate": "^0.1.1"
    }
}

2.7 css 번틀러 설정

npm install --save-dev style-loader css-loader

{
    "name": "game",
    "version": "1.0.0",
    "description": "game javascript",
    "main": "index.js",
    "scripts": {
        "build": "webpack",
        "start": "webpack server --open"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "css-loader": "^6.7.4",
        "style-loader": "^3.3.3",
        "webpack": "^5.83.1",
        "webpack-cli": "^5.1.1",
        "webpack-dev-server": "^4.15.0"
    },
    "dependencies": {
        "html-webpack-plugin": "^5.5.1",
        "pate": "^0.1.1"
    }
}

2.8 css 파일 분리하기

npm install --save-dev mini-css-extract-plugin

{
    "name": "game",
    "version": "1.0.0",
    "description": "game javascript",
    "main": "index.js",
    "scripts": {
        "build": "webpack",
        "start": "webpack server --open"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "css-loader": "^6.7.4",
        "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"
    },
    "dependencies": {
        "html-webpack-plugin": "^5.5.1",
        "pate": "^0.1.1"
    }
}

Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다

webpack v1.0 </doc>

webpack

webpack 설치