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

STATIC ASSETS .png .css .jpg .js MODULES WITH DEPENDENCIES .jpg .png .sass .sass .js .sass .cjs .hbs .js

코드를 작성해 보세요

src/index.js

import bar from './bar.js';

bar();

src/bar.js

export default function bar() {
  //
}

번들해 보세요

설정 없이도 번들할 수 있고 사용자 지정 webpack.config.js를 제공할 수도 있어요.

const path = require('path');

module.exports = {
  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 보내주시면 적극 반영하겠습니다!