카테고리 없음

Babel , Webpack

tp134679 2025. 4. 14. 09:44

<목차>

1. Babel 

1.2  Babel  개념 과 사용법

1.3  Babel 로 문법 바꾸기

2. Webpack 

2.2 Webpack 개념 과 사용법

2.3 Webpack 로 번들링 

 

1. Babel 

 Babel은 javascript 의 코드를 구형 브라우저에서도 실행해주도록 변환해주는 도구입니다. javascript는 빠르게 발전하는데 비하여 브라우저는 최신 문법을 바로 적용시키지 못하기에 브라우저가 코드를 지원하지 못하고 화면을 못뿌려주는 상황이 발전했습니다. Babel은 이러한 상황을 해결하기 위하여 javascript 문법을 구형 버전으로 다운그레이드 하여 브라우저가 지원하는 문법에 따라서 사용할 수 있게 만들어줍니다.

 

2014년: Babel(구 6to5) 등장 → 최신 ES6 문법을 ES5로 변환하는 역할

2015년: ES6 정식 발표 후 큰 인기를 얻으며 JavaScript 개발의 필수 도구로 자리 잡음

현재: JSX, TypeScript, polyfill 등 다양한 기능을 제공하며 계속 발전 중

1.2  Babel  개념 

Bable은 빠르게 발전하는 js 문법에 비해 느리게 발전하는 브라우저 딴에 맞춰서 사용하기 위해 만들어진 개발자 도구로서

실행환경이 각각 다른 환경에 맞춰 사용하게되었습니다. 

브라우저 환경  과 Node.js 에서의 환경 실행환경마다 지원하는 문법이 다르기 때문에 변환이 필요하였습니다. 

 

ex) 문법의 변환

const greet = (name) => `Hello, ${name}!`;
 

화살표함수 ES6 의 코드가

ar greet = function(name) {
    return "Hello, " + name + "!";
};

var를 사용한 ES5 문법으로 변환

 

ex) 모듈을 불러오는 문법

ES6 의 import/export 와 CommonJs require/module.exprts 

Babel은 ES6 문법(`import`)을 구형 환경(Node.js 또는 구형 브라우저)에서 사용할 수 있도록 `require`로 변환해줍니다.

 

 

1.2 Babel  사용법 

 

 npm init -y
 npm install @babel/core @babel/cli @babel/preset-env

 

Babel 는 외부모듈을 받아와서 사용합니다 

 @babel/core: Babel 핵심(Core) 패키지, Babel의 변환 기능을 수행하는 메인 엔진 역할
-@babel/cli: 바벨을 터미널에서 실행할 수 있도록 해주는 CLI
 @babel/preset-env: 최신 Javascript 문법을 자동으로 변환해주는 프리셋

 

.babelrc 파일 생성 (Babel 설정하기)

babel 을 실행시 적용할 설정을 담고 있는 런다임 설정 파일을 생성합니다.

{
    "presets": ["@babel/preset-env"]
}

 

@babel/preset-env는 최신 JavaScript를 변환할 때 가장 중요한 설정 입니다.

 현재 실행 환경(브라우저, Node.js 등)에 맞춰 자동으로 변환해주는 기능을 가지고 있습니다.

 

babel 실행 

npx babel example.js --out-file dist/example.js

해석하자면 example.js 를 babel 실행하고 변환한  파일위치를 dist/example.js 쪽에 생성하겠다 는것을 뜻합니다.

 

 

실행시 왼쪽은 변환되기전 ES6 를사용한 문법을 babel 하여 오른쪽의  ES5 문법으로 변환함.

 

 

1.3  Babel 로 문법 바꾸기

 

js문법을 기준으로 변환을 하였으니 모듈 시스템과 jsx 의 문법도 변환이 가능합니다.

 

 

모듈 시스템 변환

모듈시스템 은 js에서 지원하는 기능으로서 브라우저에선 다른문법을 사용하여 지원합니다. 그렇기에 이또한 변환이 필요한데

 

node 서버에서 사용하는 모듈 문법

CommonJS

require, module.exports

 

브라우저에서 사용하는 모듈 문법

ES module

export, import

npm install @babel/plugin-transform-modules-commonjs

해당 외부모듈을 설치 

이 모듈은 

@babel/plugin-transform-modules-commonjs: ES6 `import/export`를 CommonJS(`require/module.export`)로 변환해 줍니다.

 

.babelrc 생성 

{
    "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

 

plugins 은 파일을 바벨 한후에도 추가적으로 작업해야할 것을 바벨에게 알려주는 명령문입니다.

 

 

ES module (브라우저가 사용하는 문법) 을 사용해서 서버를 구현합니다.

import express from "express";

const app = express();

app.get('/', (req, res) => {
    res.send('Hello, Babel With Express!')
})

app.listen(3000, () => {
    console.log("Server is running");
})

 

babel 스타트

npx babel server.js --out-file dist/server.js

 

dist 파일안에 ES5 문법으로 만들어진 server.js

"use strict";

var _express = _interopRequireDefault(require("express"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// const express = require('express')

const app = (0, _express.default)();
app.get('/', (req, res) => {
  res.send('Hello, Babel With Express!');
});
app.listen(3000, () => {
  console.log("Server is running");
});

 

JSX 문법 변환

React 에서는 jsx 문법을 사용합니다. 브라우저는 이를 인지하지 못하고 js 만을 인식하기에 babel 을 통하여 언어를 인식하여야 합니다. 

 

ex)

const element = <h1>Hello! JSX!</h1>

의 jsx 의 문법을 바벨을 통하여

const element = React.createElement("h1", null, "Hello, JSX!");

의 문법으로 변환

 

 

바벨의 jsx 문법 변환 모듈  

npm install @babel/core @babel/cli @babel/preset-react

여기서 @babel/preset-react 는 jsx문법을 변환하는 프리셋 입니다. 

 

리액트 문법 작성 

import React from "react"
import ReactDOM from "react-dom"

class App extends React.Component {
    render() {
        return (
            <ul>
                <li>
                    <a href="#">menu1</a>
                </li>
            </ul>
        )
    }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />)

 

babel 을 실행하여 ES5 문법으로 만들어진 app.js


var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }


class App extends _react.default.Component {
  render() {
    return /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
      href: "#"
    }, "menu1")));
  }
}
const root = _reactDom.default.createRoot(document.querySelector("#root"));
root.render(/*#__PURE__*/_react.default.createElement(App, null));

 

2. Webpack

webpack

은 여러개의 javascript 파일을 하나로 번들링하고 최적화 하여 배포할 수있도록 도와주는 도구 입니다.

 

 

2.2 Webpack 개념 과 사용법

초기웹에서는 js 와 html , css 가 분리된 형태를 띄웠습니다.

 

HTML: 페이지의 구조를 담당

CSS: 스타일을 담당

JavaScript: 동적 기능을 담당

 

그러나 이러한 구조는 필요한 기능하나마다 파일을 불러와야했음으로 HTTP 요청이 증가했습니다. 

웹 페이지는 로딩속도가 느려지는 현상이 발생 

 

그 이후에 js 가 모듈 시스템을 지원하면서 필요한 부분만 가져와서 사용할수 있게 되었습니다. 

그러나 html 과 css 는 여전히 하나의 파일로 관리하여야 했습니다. 또한 node 환경에서 는 js가 모듈로 분리하고 사용이 가능하지만 브라우저 화면의 js는 여전히 파일을 불러와서 사용해야 하는 문제 발생 이를 보안하기 위해 프레임 워크가 나왔습니다. 

 

프레임 워크 

 

프레임 워크는 개발할 때, 필요한 기본 구조와 규칙을 제공하는 틀입니다.  페이지 단위의 개발 방식에서 컴포넌트 기반 개발 방식으로 전환 

 

프레임 워크가 발달하고 파일이 html,js,css 가 결합하여  기존의 파일을 따로 관리하는 것이 비효율적이 되었습니다.

 

Webpack 은 이러한 html 과 css , js 를 결합시켜서 번들링 해주는  외부모듈입니다.

 

웹팩 기본 실행 과정

npm install webpack webpack-cli

 

webpack 핵심 번들링 기능

webpack-cli 웹팩을 터미널(CLI)에서 실행할 수 있도록 지원

 

외부모듈을 다운 받고 babel 처럼 webpack 가 실행되었을때 가장먼저 읽는 파일이 존재합니다.

 

webpack.config.js 

 

webpack 가 실행되면 가장먼저 읽는 기본 설정 파일입니다.

module.exports = {
    entry: "./src/index.js", // 번들링을 시작할 파일
    output: {
        filename: 'bundle.js', // 생성될 번들 파일 명
        path: path.join(__dirname, 'dist') // 번들 파일 저장 경로
    }
}

 

entry : 번들링이 시작될 진입점(메인 파일)

output : 번들링된 파일이 저장된 위치 및 파일명

 

entry = index.js 

import './style.css'

const React = require("react");
const ReactDOM = require("react-dom");
const home = require("./pages/home");

console.log(React);
console.log(ReactDOM);
console.log(home.name);

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(React.createElement('div', null, "hello World!"));

 

output bundle.js 

번들되어 나온 페이지 해당 문자들에 react 의 속성들과 reactdom 등 여러 외부모듈과 render 메서드 등 모든게 합쳐져서 번들링  

 

브라우저에서 실행가능하게 만들어진 index.html  

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="./bundle.js"></script>
    </body>
</html>

해당 html 을 live 서버로 실행하면 우리가 index.js 에서 작성했던 내용이 나타나게 된다.

2.3 Webpack 로 번들링 

위의 파일은 js 의 내용과 create 로 만든 엘리먼트 만을 불러왔지만 css 도 webpack 로 번들링 가능합니다.

 

npm install webpack webpack-cli css-loader style-loader

 

webpack = Webpack의 핵심 번들러

webpack-cli =  Webpack을 CLI에서 실행할 수 있도록 지원

css-loader CSS =  파일을 JavaScript 모듈로 변환

style-loader =  변환된 CSS를 `<style>` 태그로 삽입하여 브라우저에서 적용

 

loaders 

Javascript 외에도 CSS, 이미지, 폰트, HTML 파일 등 다양한 유형의 파일을 웹펙에서 처리 할 수

있도록 지원해줍니다..

-웹팩은 기본적으로 자스만 번들링 가능하게끔 만들어주고 => CSS, 이미지등은 별도의 Loader가 필요합니다.

 

 

webpack.config.js 

module.exports = {
    entry: "./src/index.js",
    module: {
        rules: [
            {
                test: /\.css$/, // 모든 .css 파일에 대해
                use: ['style-loader', 'css-loader'], // style-loader와 css-loader를 적용
            }
        ]
    },
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist")
    }
}

 

odule.rules에서 CSS 파일을 처리할 수 있도록 css-loader랑 style-loader를 적용

 css파일이 js 코드에서 import될 수 있도록 변환

 

 

entry = index.js 

import './index.css'

console.log("하하하 이제 CSS도 모듈로 불러올 수 있지롱");

css-loader CSS 를 설치하였슴으로 인해 css 파일을 모듈처럼 끌고오는게 가능

 

index.css

* {
    background: red;
}

전체 색상 red 적용

 

 bundle.js 

ert=s().bind(null,"head"),h.domAPI=i(),h.insertStyleElement=d(),o()(m.A,h),m.A&&m.A.locals&&m.A.locals,console.log("하하하 이제 CSS도 모듈로 불러올 수 있지롱")})();

번들된 js 중 일부 

 

 

dist/ index.js 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

번들되어 브라우저에서도 실행가능하게 만들어진 html 

실행화면

 

 

HTMl 템플릿과 리엑트 프로젝트

 

이또한 webpack 로 번들링하여 만들 수 있습니다. 

 

npm install webpack webpack-cli html-webpack-plugin

 

Webpack plugin

Webpack은 기본적으로 js 파일을 번들링만 해주고. 

HTML파일을 생성하지 않습니다. CSS도 마찬가지

개념으로 보면, 웹팩은 자스만 번들링하고 css도 번들링 필요하면 그 외 모듈 설치가 필요합니다.

css-loader, style-loader

이 문제를 해결하기 위해서 html-webpack-plugin 을 사용하면 자동 html 생성 

 

 

webpack.config.js 

 

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/, // 모든 .js 파일에 대해
                exclude: /node_modules/,
                use: ["babel-loader"] // 바벨 적용
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        })
    ],
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist")
    }
}

 

entry: Webpack이 번들링을 시작할 JavaScript 파일 (index.js).

output: 번들링된 파일(bundle.js)을 dist 폴더에 저장.

plugins:

HtmlWebpackPlugin: src/index.html을 템플릿으로 사용하여 자동으로 HTML 파일 생성.

HTML 파일 내부에 Webpack이 생성한 bundle.js가 자동으로 포함됨.

 

또한 jsx 의 문법을 사용해야하므로 babel 이 필요합니다.

.babelrc 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

@babel/preset-env: 최신 JavaScript 문법(ES6+)을 변환.

@babel/preset-react: JSX 문법을 변환하여 브라우저에서 실행 가능하도록 함.

 

관련 페키지

$ npm install @babel/preset-env @babel/preset-react
$ npm install @babel/core babel-loader

 

@babel/core Babel의 핵심 기능.

babel-loader Webpack에서 Babel을 사용할 수 있도록 도와주는 Loader.

 

 

번들링할 reate page 

 

index.js 을 기준

 

index.html ,app.js ,test,js

 

 

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./app.js"

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App/>);

 

index.html 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

 

app.js

import React from "react"
import Test from "./test";

class App extends React.Component {
    render() {
        return <Test/>
    }
}

export default App

 

test.js

import React from "react"

class Test extends React.Component {
    render() {
        return (
            <div>나는 테스트</div>
        )
    }
}

export default Test

 

npx webpack 

 

dist 폴더에 html 과 번들링 된 파일생성

dist/ index.html

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    <script defer src="bundle.js"></script></head>
    <body>
        <div id="root"></div>
    </body>
</html>

 

실행시 브라우저 화면에서도 react 가 적용되어서 페이지가 나온다!