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

Webpack을 설치해 보세요

npm install --save-dev webpack webpack-cli

코드를 작성해 보세요

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

src/index.js

import bar from "./bar.js";

bar();

src/styles.css

body {
  font-family: system-ui;
}

번들해 보세요

webpack.config.js에서 webpack이 페이지를 가리키도록 설정하세요.

export default {
  entry: "./src/index.html",
  output: {
    // the page loads a `<script type="module">`, so emit ES modules to match
    module: true,
  },
};

Webpack은 페이지를 파싱하고 페이지가 참조하는 모든 항목을 번들링한 다음 URL을 다시 작성합니다. loader나 plugin은 필요하지 않습니다.

영상으로 된 설명이 더 좋으신가요? 여기에서 확인하세요.

dist/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <script type="module" src="index.mjs"></script>
  </body>
</html>

그런 다음 커맨드 라인에서 webpack을 실행하세요. HTML, CSS, JavaScript는 모두 webpack 자체에서 처리하므로 dist/에는 페이지와 페이지가 가리키는 애셋이 생성됩니다.

npx webpack --mode development

--mode development는 페이지와 스타일시트를 최소화하지 않고 번들을 브라우저 개발자 도구에서 자신의 파일에 다시 매핑하므로, 디버깅하는 것이 작성한 것처럼 보입니다.

npx webpack --mode production

--mode production은 페이지, 스타일시트, 스크립트를 최소화하고 사용하지 않는 코드를 제거합니다. 이것이 배포하는 빌드입니다.

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

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

Native HTML과 Native CSS 가이드에서는 내장 기능과 기존 설정을 이전하는 방법을 설명합니다.

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