웹스토리보이

Webpack은 자바스크립트 애플리케이션을 위한 모듈 번들러(module bundler)입니다. 모듈 번들러는 웹 애플리케이션을 구성하는 다양한 자원들을 하나로 묶어주는 도구입니다.

Webpack은 다양한 기능과 유연성을 제공합니다. 코드 스플리팅(Code Splitting)을 통해 애플리케이션 로딩 속도를 최적화할 수 있고, 로더(Loader)를 사용하여 CSS, 이미지, 폰트 등 다른 유형의 파일도 처리할 수 있습니다. 또한, 플러그인(Plugin) 시스템을 통해 웹팩의 동작을 확장하고 사용자 정의할 수 있습니다.

웹 애플리케이션을 개발할 때, 여러 개의 자바스크립트 파일, CSS 파일, 이미지 파일 등을 사용하는 경우가 많습니다. 이러한 자원들은 각각의 요청으로 서버에서 다운로드되어야 합니다. 그러나 이는 여러 번의 서버 요청과 불필요한 대기 시간을 발생시키므로 성능에 악영향을 줄 수 있습니다.

Webpack은 이러한 자원들을 모두 하나의 파일로 묶어주는 작업을 수행합니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 또한, Webpack은 의존성 관리를 자동으로 처리하여 개발자가 모듈 간의 의존성을 직접 관리하지 않아도 됩니다.

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

1.2 nmp초기화 설치하기

$ npm init or $ npm init -y

{
    mode : 'development', //production,development
    "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",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "game",
"version": "1.0.0",
"license": "ISC",
"devDependencies": {
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1"
}
}
}

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

const path = require('path');
module.exports = {
    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"
}
}

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",
    "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"
}
}

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",
    "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"
}
}

webpack 🌞

webpack

webpack 개념

webpack 설치

1.1 Node.js 설치하기

1.2 nmp초기화 설치하기

1.3 webpack 설치하기

1.4 webpack config 설치하기

1.5 webpack 개발자용 서버 설정하기

1.6 HTML 번들러 설정

1.7 CSS 번들러 설정

1.8 CSS 파일 분리하기

vite

vite 개념