WebPack 모듈 | 요람일지

WebPack은 자바스크립트 기반의 모듈 번들러입니다. 번들러는 서버의 자원을 효율적으로 사용하기 위해 여러 파일들을 하나의 묶음으로 만들어주는 작업입니다.

WEBPACK 사용법

{
  "object": "block",
  "id": "dfa60df4-50f2-4b7e-960c-2bf010dcd76a",
  "parent": {
    "type": "page_id",
    "page_id": "390765fe-8b67-811b-9bc8-ca4c9d687f0a"
  },
  "created_time": "2026-07-01T14:55:00.000Z",
  "last_edited_time": "2026-07-01T14:55:00.000Z",
  "created_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "last_edited_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "has_children": false,
  "in_trash": false,
  "type": "heading_4",
  "heading_4": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "1. 설치",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "1. 설치",
        "href": null
      }
    ],
    "is_toggleable": false,
    "color": "default"
  },
  "archived": false
}

npm install -D webpack webpack-cli css-loader style-loader html-webpack-plugin

webpack: 모듈 번들러

webpack-cli: cli에서 webpack 사용 명령어를 실행하게 해주는 커멘드 라인 도구

css-loader: css파일을 모듈로 취급하여 js,jsx에 포함시키는 로더

style-loader: dom에 <style>을 사용하여 css 속성을 부여하는 로더

html-webpack-plugin: html을 자동으로 수정해주는 플러그인

{
  "object": "block",
  "id": "de97d680-7284-4697-a149-52b83c34c650",
  "parent": {
    "type": "page_id",
    "page_id": "390765fe-8b67-811b-9bc8-ca4c9d687f0a"
  },
  "created_time": "2026-07-01T14:55:00.000Z",
  "last_edited_time": "2026-07-01T14:55:00.000Z",
  "created_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "last_edited_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "has_children": false,
  "in_trash": false,
  "type": "heading_4",
  "heading_4": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "2. 실행",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "2. 실행",
        "href": null
      }
    ],
    "is_toggleable": false,
    "color": "default"
  },
  "archived": false
}

npx webpack : 번들링을 위한 실행 명령어

webpack.config.js : webpack을 설치할 때의 설정 파일

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: "./src/index.js", // 작성된 코드의 시작점이 되는 파일
  output: {
    path: path.resolve(__dirname, "dist"), // 절대경로로 설정된 번들링이 내보낼 위치
    filename: "app.bundle.js", // entry 파일의 번들링 버전 이름
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 정규표현식으로 작성된 변환할 파일 형식
        use: ["style-loader", "css-loader"], // 불러올 모듈 로더
        exclude: /node_modules/, // 제외할 파일 및 폴더
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ // 설치한 플러그인의 인스턴스
    template: path.resolve(__dirname, "src", "index.html") // 
  })]
};