집 >웹 프론트엔드 >JS 튜토리얼 >모듈 번들러 설명: 예제가 포함된 Webpack, Rollup, Parcel 및 Snowpack

모듈 번들러 설명: 예제가 포함된 Webpack, Rollup, Parcel 및 Snowpack

Susan Sarandon원래의: 2024-12-12 20:50:12652검색

Module Bundlers Explained: Webpack, Rollup, Parcel, and Snowpack with Examples

HTML, CSS, JavaScript만으로 웹사이트를 구축하는 것이 간단해 보일 수 있습니다. 그러나 애플리케이션이 성장함에 따라 이러한 요소 이상의 것이 필요하게 됩니다. TypeScript, React와 같은 UI 라이브러리, SASS와 같은 CSS 전처리기 또는 타사 모듈을 사용할 수 있습니다. 문제는 종속성이 제대로 작동하지 않아 충돌, 대용량 파일 및 느린 로드 시간이 발생하는 경우 발생합니다.

여기서 모듈 번들러가 필요합니다. Webpack, Rollup, Parcel, Snowpack 더 원활하고 빠른 개발 및 생산 경험을 위해 코드를 관리하고 최적화하는 데 도움이 됩니다. 이번 블로그에서는 개념을 더 쉽게 이해할 수 있도록 예제를 통해 이러한 번들러의 역할을 살펴보겠습니다.

모듈 번들러란 무엇입니까?

모듈 번들러는 모든 코드, 해당 종속 항목 및 모듈을 가져와 브라우저에 최적화된 단일 또는 몇 개의 파일로 묶는 도구입니다. 이를 통해 HTTP 요청 수를 줄이고 로드 시간을 개선하며 종속성을 효율적으로 관리할 수 있습니다.

모듈 번들러를 사용하는 이유는 무엇입니까?

최신 웹 애플리케이션을 구축할 때 다양한 문제에 직면하게 됩니다.

종속성 관리: 여러 타사 라이브러리를 관리합니다.
코드 분할: 요청 시 필요한 코드만 로드하여 성능을 향상합니다.
트랜스파일: 최신 JavaScript(ES6)를 이전 브라우저에서 작동하도록 변환합니다.
축소: 파일 크기를 줄여 로딩 속도를 높입니다.

모듈 번들러는 다음을 통해 이러한 문제를 해결합니다.

종속성 그래프를 생성하여 모든 모듈과 파일을 추적합니다.
축소하고 분할
다양한 브라우저에서 호환성을 보장합니다.

간단한 Webpack 설정의 예

Webpack 작동 방식의 예부터 시작해 보겠습니다. Lodash와 같은 종속성이 포함된 간단한 index.js 파일이 있다고 가정해 보겠습니다.

1단계: 새 프로젝트를 초기화합니다.

mkdir my-project
cd my-project
npm init -y
npm install lodash --save

2단계: src 디렉터리에 index.js 파일을 생성합니다.

// src/index.js
import _ from 'lodash';

console.log(_.camelCase('hello world'));

3단계: 공용 디렉토리 내에 index.html 파일을 생성합니다.

<!-- public/index.html -->
<!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>
  <h1>Webpack Example</h1>
  <script src="../dist/main.js"></script>
</body>
</html>

4단계: Webpack 및 Webpack CLI를 설치합니다.

npm install webpack webpack-cli --save-dev

5단계: Webpack 구성 파일(webpack.config.js)을 생성합니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point of our app
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development', // Development mode (use 'production' for production)
};

6단계: package.json에 스크립트를 추가하여 Webpack을 실행합니다.

mkdir my-project
cd my-project
npm init -y
npm install lodash --save

7단계: Webpack을 실행하여 코드를 번들로 묶습니다.

// src/index.js
import _ from 'lodash';

console.log(_.camelCase('hello world'));

이렇게 하면 index.js 파일과 해당 종속 항목이 dist 폴더 내의 main.js 파일로 묶입니다. 이제 index.html에서 이 파일을 참조할 수 있습니다.

기타 모듈 번들러

1. 롤업

롤업은 JavaScript 라이브러리를 번들링하고 소규모 프로젝트에 최적화된 번들을 생성하도록 설계되었습니다. Webpack과 달리 Rollup은 사용되지 않는 코드(트리 쉐이킹)를 제거하여 더 작고 효율적인 번들에 중점을 둡니다.

설정 예:

<!-- public/index.html -->
<!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>
  <h1>Webpack Example</h1>
  <script src="../dist/main.js"></script>
</body>
</html>

간단한 Rollup.config.js 파일 만들기:

npm install webpack webpack-cli --save-dev

앱을 번들로 묶으려면 다음을 사용하여 Rollup을 실행할 수 있습니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point of our app
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development', // Development mode (use 'production' for production)
};

롤업은 트리 쉐이킹 기능 덕분에 소규모 프로젝트나 라이브러리를 묶을 때 훨씬 간단하고 효율적입니다.

2. 소포

Parcel은 구성이 필요 없는 번들러입니다. 구성 파일 없이 필요한 모든 자산을 자동으로 감지하고 번들링합니다. 초보자에게 친숙하며 중소 규모 프로젝트에 적합합니다.

설정 예:

"scripts": {
  "build": "webpack"
}

index.js에서:

npm run build

개발 서버를 실행하려면:

npm init -y
npm install lodash --save
npm install rollup --save-dev

Parcel은 추가 구성 없이 자동으로 번들링, 라이브 다시 로드, 코드 분할을 처리합니다.

3. 스노팩

Snowpack은 필요할 때만 파일을 다시 빌드하는 현대적이고 빠른 번들러입니다. 모든 변경 사항에 대해 모든 것을 컴파일하는 대신, 더 빠른 개발을 위해 종속성을 브라우저에 직접 전달합니다.

설정 예:

// rollup.config.js
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js', // Entry point
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // Immediate function execution
    name: 'MyApp',
  },
  plugins: [terser()], // Minify the output bundle
};

snowpack.config.js에서 간단한 구성을 만듭니다.

npx rollup -c

Snowpack 실행:

npm init -y
npm install parcel-bundler --save-dev
npm install lodash --save

Snowpack은 변경된 파일만 컴파일하여 개발 중에 즉시 업데이트를 제공합니다.

결론

Webpack, Rollup, Parcel, Snowpack과 같은 모듈 번들러는 현대 웹 개발에 중요한 도구입니다. 종속성을 관리하고, 코드를 최적화하고, 애플리케이션의 로드 시간을 줄이는 데 도움이 됩니다. 번들러에 대한 간략한 요약은 다음과 같습니다.

Webpack: 구성 가능성이 높으며 종속성이 많은 대규모 프로젝트에 이상적입니다.
롤업: 도서관에 적합하며 나무 흔들림이 있는 작은 묶음에 중점을 둡니다.
Parcel: 구성이 필요 없고 사용하기 쉬우며 소규모 프로젝트나 빠른 프로토타입에 적합합니다.
Snowpack: 빠른 개발 번들러는 종속성을 브라우저에 직접 전달하여 대규모 프로젝트의 속도를 높여줍니다.

이러한 도구의 작동 방식을 이해하면 프로젝트 요구 사항에 가장 적합한 도구를 선택하고 웹 개발 워크플로를 향상시킬 수 있습니다!

위 내용은 모듈 번들러 설명: 예제가 포함된 Webpack, Rollup, Parcel 및 Snowpack의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript typescript json css html es6 sass webpack for Directory public JS number this http ui everything Other

성명：

이전 기사：프론트엔드 질문 2부다음 기사：프론트엔드 질문 2부