webpack
webpack logo

애셋을 스크립트를
번들해 보세요

Webpack을 설치해 보세요

npm install --save-dev webpack webpack-cli

코드를 작성해 보세요

src/index.js

import bar from "./bar.js";

bar();

src/bar.js

export default function bar() {
  //
}

번들해 보세요

설정 파일 없이 시작하거나 사용자 지정 webpack.config.js 파일을 제공하세요.

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

영상으로 된 설명이 더 좋으신가요? 설정 없이 시작해 보세요.

page.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    ...
  </head>
  <body>
    ...
    <script src="dist/bundle.js"></script>
  </body>
</html>

그다음 커멘드 라인에서 webpack 명령어를 실행해 bundle.js를 생성하세요.

멋지지 않나요? 좀 더 알아보세요!

가이드를 따라 빠르게 시작해 보거나, Concepts에서 webpack의 핵심 개념을 자세히 알아보세요.

한글화 작업에 참여하려면 어떻게 해야합니까?

한국어 번역 저장소에 자유롭게 이슈를 올려주시고, 기여 방법을 참고하여 PR 보내주시면 적극 반영하겠습니다!