Skip to main content

Webpack

Yeo Da Seul

webpack

🍕webpack🍕

JavaScript 애플리케이션을 위한 정적 모듈 번들러(Static Module Bundler)입니다.

Webpack은 다양한 기능을 제공합니다. 모듈 로딩, 코드 압축, 파일 병합, 코드 스플리팅(Code Splitting), 플러그인 시스템 등을 지원하여 개발자가 애플리케이션을 효율적으로 관리하고 최적화할 수 있도록 도와줍니다. 또한, 개발 환경과 프로덕션 환경 간의 설정을 구분하여 관리할 수 있는 기능도 제공합니다.

Webpack은 이러한 모듈들을 처리하여 하나의 번들 파일로 만들어줍니다. 번들 파일은 모든 의존 모듈과 애플리케이션 코드를 포함하며, 이를 통해 웹 브라우저에서 실행할 수 있게 됩니다. 또한, Webpack은 JavaScript 이외에도 CSS, 이미지 등 다양한 유형의 파일도 처리할 수 있습니다.

Webpack은 JavaScript 모듈뿐만 아니라 CSS, 이미지, 폰트 등 다양한 유형의 파일도 모듈로 취급하여 번들링할 수 있습니다. 이를 통해 애플리케이션의 의존성을 관리하고 필요한 리소스를 효율적으로 로드할 수 있습니다.

🍔webpack 설치🍔

1-1 Node.js 설치하기

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 = {
    mode: 'production',    //production, development
    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
{
    "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,
    })],
}

1-7 CSS 번들러 설정

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

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

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🌭

JavaScript 애플리케이션을 위한 정적 모듈 번들러(Static Module Bundler)입니다.

웹 개발을 위한 빠른 속도와 간편한 설정을 제공하는 도구입니다. Vue.js 팀에서 개발한 Vite은 Vue.js 애플리케이션 개발을 위한 주요 도구로 알려져 있습니다.