Previous
Next
Parcel Complete Guide | Zero Config Build Tool

Parcel Complete Guide | Zero Config Build Tool

· 20분 읽기 · 수정 beginner tutorial
Parcel Complete Guide | Zero Config Build Tool

이 글의 핵심

Parcel is a zero-configuration web application bundler. It offers blazing fast performance with multi-core compilation and requires no configuration to get started.

Introduction

Parcel is a web application bundler that requires zero configuration. Unlike Webpack, you don’t need to write config files - Parcel automatically handles everything.

The Problem with Traditional Bundlers

Webpack:

// webpack.config.js - hundreds of lines
module.exports = {
  entry: './src/index.js',
  output: { /* ... */ },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(png|jpg)$/, use: 'file-loader' },
      // ... many more rules
    ]
  },
  plugins: [/* ... */]
};

Parcel:

# No config needed!
parcel index.html

1. Installation

npm install --save-dev parcel

Quick Start:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./src/index.js"></script>
</body>
</html>
// src/index.js
import './styles.css';

console.log('Hello from Parcel!');
# Development
npx parcel index.html

# Production
npx parcel build index.html

2. Features Out of the Box

Automatic Dependencies

Parcel automatically installs dependencies when needed:

// Just import - Parcel handles the rest
import React from 'react';
import ReactDOM from 'react-dom';

// Even works with CSS
import './styles.css';

// Images
import logo from './logo.png';

Hot Module Replacement

// Automatically enabled in dev mode
if (module.hot) {
  module.hot.accept();
}

Multiple Entry Points

parcel src/index.html src/admin.html

3. React Example

No configuration needed!

// src/App.jsx
import React from 'react';

export default function App() {
  return (
    <div>
      <h1>Hello, Parcel!</h1>
    </div>
  );
}
// src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <script type="module" src="./src/index.jsx"></script>
</body>
</html>
parcel index.html
# Parcel automatically:
# - Detects React
# - Transpiles JSX
# - Sets up HMR
# - Optimizes for production

4. TypeScript Support

Zero config!

// src/index.ts
interface User {
  name: string;
  age: number;
}

const user: User = {
  name: 'Alice',
  age: 30
};

console.log(user);
parcel index.html
# Parcel automatically detects and compiles TypeScript

5. CSS and Styling

Plain CSS

/* styles.css */
.button {
  background: blue;
  color: white;
}
import './styles.css';

CSS Modules

/* Button.module.css */
.button {
  background: blue;
}
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click</button>;
}

PostCSS

npm install --save-dev postcss autoprefixer
// .postcssrc
{
  "plugins": {
    "autoprefixer": {}
  }
}

SASS/SCSS

npm install --save-dev sass
// styles.scss
$primary: blue;

.button {
  background: $primary;
}
import './styles.scss';
// Parcel automatically compiles SCSS

6. Image Optimization

// Automatically optimized
import image from './image.jpg';

// WebP support
import webp from './image.webp';

// SVG as component (React)
import Logo from './logo.svg';
<!-- Automatic optimization -->
<img src="./image.jpg" alt="Image">

7. Code Splitting

Dynamic Imports

// Automatic code splitting
button.addEventListener('click', async () => {
  const module = await import('./heavy-module');
  module.default();
});

React Lazy

import React, { lazy, Suspense } from 'react';

const Heavy = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Heavy />
    </Suspense>
  );
}

8. Environment Variables

# .env
API_URL=https://api.example.com
API_KEY=secret123
console.log(process.env.API_URL);
console.log(process.env.API_KEY);
# Production
parcel build index.html
# Automatically inlines environment variables

9. Production Build

parcel build index.html

Automatic optimizations:

  • ??Minification (Terser for JS, cssnano for CSS)
  • ??Tree shaking
  • ??Scope hoisting
  • ??Compression
  • ??Source maps
  • ??Content hashing
// package.json
{
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html",
    "preview": "parcel build index.html --no-optimize"
  }
}

10. Configuration (Optional)

Parcel works without config, but you can customize:

// package.json
{
  "source": "src/index.html",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "@parcel/transformer-js": {
    "inlineFS": false,
    "inlineEnvironment": ["NODE_ENV"]
  }
}

11. Multi-Page Application

project/
?��??� index.html
?��??� about.html
?��??� contact.html
?��??� src/
    ?��??� index.js
    ?��??� about.js
    ?��??� contact.js
parcel src/*.html

12. Library Mode

// package.json
{
  "name": "my-library",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "source": "src/index.js",
  "targets": {
    "main": {
      "optimize": true
    },
    "module": {
      "optimize": true
    }
  }
}
parcel build

13. Performance

Parcel is incredibly fast:

BundlerCold StartHMR
Parcel 21.2s<50ms
Webpack 53.5s~200ms
Rollup2.8sN/A

Why Parcel is fast:

  • Multi-core compilation
  • Aggressive caching
  • Rust-based compiler
  • Minimal overhead

14. Best Practices

1. Use package.json Scripts

{
  "scripts": {
    "dev": "parcel src/index.html --open",
    "build": "parcel build src/index.html --public-url ./",
    "clean": "rm -rf dist .parcel-cache"
  }
}

2. Gitignore

# .gitignore
dist/
.parcel-cache/

3. Environment-Specific Config

const apiUrl = process.env.NODE_ENV === 'production'
  ? 'https://api.production.com'
  : 'http://localhost:3000';

15. Common Issues

Problem: Module not found

# Clear cache
rm -rf .parcel-cache

Problem: Port already in use

parcel index.html --port 1234

Problem: CORS in development

{
  "scripts": {
    "dev": "parcel --port 3000 --host localhost"
  }
}

Summary

Parcel simplifies web development with zero config:

  • Zero configuration required
  • Blazing fast with multi-core compilation
  • Hot module replacement built-in
  • Automatic dependency resolution
  • Production-ready optimizations

Key Takeaways:

  1. No config files needed
  2. Works with React, Vue, TypeScript out of box
  3. Automatic code splitting
  4. Fast HMR (<50ms)
  5. Perfect for quick projects and prototypes

Next Steps:

  • Try [Vite](/en/blog/vite-complete-guide/ for even faster builds
  • Learn [Webpack](/en/blog/webpack-complete-guide/ for complex setups
  • Explore [esbuild](/en/blog/esbuild-complete-guide/ for bundler plugins

Resources:

?�주 묻는 질문 (FAQ)

Q. ???�용???�무?�서 ?�제 ?�나??

A. Complete Parcel guide for web development. Learn zero-config bundling, hot module replacement, code splitting, and produ???�무?�서????본문???�제?� ?�택 가?�드�?참고???�용?�면 ?�니??

Q. ?�행?�로 ?�으�?좋�? 글?�?

A. �?글 ?�단???�전 글 ?�는 관??글 링크�??�라가�??�서?��?배울 ???�습?�다. C++ ?�리�?목차?�서 ?�체 ?�름???�인?????�습?�다.

Q. ??깊이 공�??�려�?

A. cppreference?� ?�당 ?�이브러�?공식 문서�?참고?�세?? 글 말�???참고 ?�료 링크???�용?�면 좋습?�다.

같이 보면 좋�? 글 (?��? 링크)

??주제?� ?�결?�는 ?�른 글?�니??

  • [Jest Testing Guide | Unit Tests· Mocks](/en/blog/jest-testing-guide/
  • [Qwik Complete Guide | Resumable JavaScript Framework](/en/blog/qwik-complete-guide/
  • [CMake find_package for C++ | Boost· OpenSSL](/en/blog/cpp-cmake-find-package/

??글?�서 ?�루???�워??(관??검?�어)

Parcel, Build Tools, Bundler, JavaScript, Web Development, Zero Config ?�으�?검?�하?�면 ??글???��????�니??