React💙

[React] Webpack 이해하기 📘

MAYMIN 2023. 12. 17. 21:38
728x90
SMALL

📘 웹팩 (Webpack) 이란  ?

프론트엔드 개발에서 사용되는 모듈 번들러(Module Bundler) 중 하나로,

여러 개의 파일 및 의존성을 하나로 묶어 최적화된 형태로 만들어주는 도구

 

 

간단하게 말해서...

 

웹팩은 여러 종류의 파일(JavaScript, CSS, 이미지 등)을 하나의 묶음 또는 번들로 만들어서

웹 애플리케이션의 성능을 향상시키고 로딩 시간을 최소화하는 역할 !!!

* 모듈 번들러 : HTML, CSS, Javascript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구

 

 

웹팩을 통해 할 수 있는 일

  • 개발자 : 모듈 단위로 코드를 구성하고 유지보수
  • 브라우저 : 최적화된 번들을 통해 더 효율적으로 어플리케이션 실행 가능

 

🥨 웹팩의 주요 특징

  1. Entry: 웹팩은 애플리케이션의 진입점을 정의하는데, 이를 "entry"라고 한다. 주로 프로젝트의 메인 JavaScript 파일이나 애플리케이션의 진입점이 된다. [빌드의 시작점]
  2. Output: 웹팩이 번들링한 결과물의 경로와 파일명을 지정하는 설정이다. 일반적으로 dist 디렉토리에 번들된 파일이 생성된다.[번들링된 결과물의 경로와 이름을 설정]
  3. Loader: 웹팩은 JavaScript 파일 이외의 다른 유형의 파일(CSS, 이미지 등)도 처리할 수 있도록 Loader를 사용한다. Loader는 파일을 해석하고 변환하는 역할이다.
  4. Plugin: Loader가 파일 단위로 동작한다면, 플러그인은 번들된 결과물 전체에 대한 작업을 수행한다. 코드 최적화, 환경 변수 주입, 번들된 파일 간의 의존성 관리 등을 플러그인을 통해 설정할 수 있다.
  5. Module: 웹팩은 모든 파일을 모듈로 처리하며, 각 모듈 간의 의존성을 파악하여 번들링한다. 자바스크립트 모듈뿐만 아니라 CSS, 이미지도 모듈로 취급된다.

 

🥨 웹팩의 장점

웹팩을 사용하면 모듈 시스템을 통해 코드를 구성하고, 필요한 리소스를 효과적으로 관리할 수 있어 개발 생산성을 높이고 성능을 최적화할 수 있다.

 

 

더 쉬운 이해를위해웹팩을 사용한 예시를 보자

✏️ 예시 1

 

☑️ 목표 : JavaScript와 CSS 파일을 번들링하고, HTML 파일에 결과물을 포함하기

 

1. 프로젝트 구조

my-webpack-project/
|-- src/
|   |-- index.js
|   |-- styles.css
|-- dist/
|-- index.html
|-- package.json
|-- webpack.config.js

 

2. 파일내용

  • src/index.js
// src/index.js
import message from './message';
import './styles.css';

console.log(message);
  • src/message.js
// src/message.js
export default "Hello, Webpack!";
  • src/styles.css
/* src/styles.css */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

 

  • index.html
<!-- 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>
  <script src="dist/bundle.js"></script>
</body>
</html>

 

  • package.json
// package.json
{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "style-loader": "^3.0.0",
    "css-loader": "^6.0.0"
  }
}

 

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

 

3. 설치 및 빌드

프로젝트 디렉토리에서 다음 명령어를 실행하여 필요한 패키지를 설치하고 프로젝트를 빌드

npm install
npm run build

 

4. 결과물

웹팩이 번들링한 결과물은 dist/bundle.js에 생성되며, 이 파일을 index.html에서 로딩하여 웹 애플리케이션을 실행

 

 

✏️ 예시 2 (로더와 플러그인 활용)

☑️ 목표 : CSS 파일을 번들링하고, 번들링된 CSS를 HTML 파일에 적용

1. 프로젝트 구조

my-webpack-project/
|-- src/
|   |-- index.js
|   |-- styles.css
|-- dist/
|-- index.html
|-- package.json
|-- webpack.config.js

 

2.파일내용

 

  • src/index.js
// src/index.js
import message from './message';
import './styles.css';

console.log(message);

 

  • src/message.js
// src/message.js
export default "Hello, Webpack!";

 

  • src/styles.css
/* src/styles.css */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

 

  • index.html
<!-- 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>
  <script src="dist/bundle.js"></script>
</body>
</html>

 

  • package.json
// package.json
{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "style-loader": "^3.0.0",
    "css-loader": "^6.0.0",
    "html-webpack-plugin": "^5.0.0"
  }
}

 

  • webpack.config.js
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

 

3. 설치 및 빌드

npm install
npm run build

 

4. 이해하기

  • 로더 (css-loader 및 style-loader):
    • webpack.config.js의 module.rules 설정에서 CSS 파일에 대한 로더를 추가
    • css-loader: CSS 파일을 자바스크립트 모듈로 변환
    • style-loader: 변환된 CSS를 <style> 태그로 HTML에 삽입
  • 플러그인 (html-webpack-plugin):
    • webpack.config.js의 plugins 설정에서 HTMLWebpackPlugin을 추가
    • 이 플러그인은 번들링된 결과물을 자동으로 HTML에 포함시켜주기 때문에, 수동으로 <script> 태그를 작성하지 않아도 됨

5. 결과물

결과물을 실행하면 styles.css의 스타일이 HTML에 적용된 것을 확인할 수 있다.

 

 

이렇게 웹팩을 쉬운 예시와 함께 알아보았다.이후에는 실습으로 이해해보자 !

728x90
LIST