webpack-example

Node.js

# Node.js 버전 확인
➜ node -v
v20.9.0

# v20.9.0 가 설치되어 있지 않다면
➜ nvm install 20.9.0

# v20.9.0 를 사용하고 있지 않다면
➜ nvm use 20.9.0

# Node.js 버전 다시 확인
➜ node -v
v20.9.0

npm

# npm 버전 확인
➜ npm -v
10.2.1

# 최신 버전 npm 으로 업그레이드 
➜ npm i [email protected] -g

# npm 버전 다시 확인
➜ npm -v
10.2.1

pnpm

# pnpm 설치 확인 및 버전 확인
➜ pnpm -v
8.10.0

# 최신 버전 pnpm 으로 업그레이드 
➜ npm i [email protected] -g

# pnpm 설치 다시 확인 및 버전 다시 확인
➜ pnpm -v
8.10.0

프로젝트 생성

➜ mkdir webpack-example

➜ cd webpack-example

➜ pnpm init

➜ corepack use [email protected]

➜ code .

설정 파일 없이 번들링

➜ pnpm add webpack webpack-cli -D

// src/index.js

function component() {
  const element = document.createElement("div");

  element.innerHTML = "hello, webpack";

  return element;
}

document.body.appendChild(component());

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack-example</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

➜ pnpm exec webpack

➜ pnpx serve dist

의존성 추가

➜ pnpm add lodash

// const _ = require("lodash");
import _ from "lodash";

const component = () => {
  const element = document.createElement("div");

  element.innerHTML = _.join(["hello", "webpack"], ", ");

  return element;
};

document.body.appendChild(component());

➜ pnpm exec webpack

➜ pnpx serve dist

설정 파일을 이용한 번들링

// webpack-example/webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'), // 절대 경로
  },
};