이전 글에서는 webpack을 이용한 기본 설정을 마쳤다.
이번 글에는 기본 환경을 적용한 webpack에 babel을 적용하여 webpack에대한 전반적인 이해도를 추가로 진행하도록
하고자 합니다.
로더는 webpack 에서 중요한 부분을 차지하기 때문에 단순하게 번들링만 할 경우, 효용성이 크게 떨어진다고 합니다.
번들링을 사용하지 않고 각각의 정적파일로 관리할 때, 장점들을 모두 사용하기 위해 Loader 라는 것을 이용합니다.
Loader는 모듈을 입력받아 원하는 형태로 변환하고 새로운 모듈을 출력하는데
Loader는 babel 같은 트랜스 파일러 뿐 아니라 이미지파일, CSS파일 등에 대한 작업도 수행할 수 있다.
우선 나는 React 환경을 사용하고 있기 때문에 Loader를 react 환경에 맞게 설치를 진행했다.
npm i babel-loader @babel/core @babel/preset-react react react-dom
webpack에서 babel을 loader로 사용하기 위한 babel-loader
babel의 핵심 기능을 사용할 수 있게 해주는 @babel/core
babel의 react 관련 트랜스파일링을 위한 플러그인을 모아둔 프리셋 @babel/preset-react
그리고 react 와 react Dom 관련 react,react-dom 을 설치를 진행.
( react-dom 은 reactv18 + 이상에서 사용하지 않고 createRoot 를 사용한다 )
( react-dom을 사용한다면 리액트는 17 버전으로 동작한다고 한다 )
테스트 코드를 아래와 같이 작성
import React from 'react'
// import ReactDOM from 'react-dom'
import { createRoot } from 'react-dom/client'
function App() {
return (
<div className='test'>
<h3 className='title'>webpack + babel loder test !!</h3>
</div>
)
}
const contaier = document.getElementById('root');
const root = createRoot(contaier);
root.render(<App/>);
바벨 설정 파일을 작성
프로젝트 root 디렉토리에 babel.config.js 를 생성
const presets = ['@babel/preset-react'];
module.exports = {presets};
webpack 설정 파일에 babel 로더 관련 옵션을 작성
웹팩으로 번들링을 명령하면 옵션의 babel-loder 관련 설정이 있기 때문에 bable-config.js에서의 작성한 내용을 바탕으로 jsx 코드를 읽을 수 있게 된다.
module.exports = {
entry: './src/index.js',
mode : 'development',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: { // 각종 설정 작성
rules: [ //loader 설정, parser 설정 등 작성
{
test: /\.js$/, // js로 끝나는 확장자에 대해서 bable-loader 사용하겠다고 정의
exclude : /node_modules/, // 제외할 항목
use : 'babel-loader',
},
],
}
};( 각 속성이 의미하는 바는 이전 글에 정리 돼 있습니다 ! )
이전에 생성한 HTML 파일에 root id를 가진 div를 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<div id = "root"></div>
<script src="main.js"></script>
</body>
</html>
스크립트 태그에 번들링된 js 파일을 추가
테스트 서버를 실행할 수 있는 serve 라이브러리를 통해서 샘플 페이지를 실행
npm i -g serve
serve -s
Loader 설정을 통해서 babel이 JSX 코드를 잘 읽어와 아래와 같이 페이지를 표시
다음 글은 webpack-dev-server를 적용하게 되는 과정을 설명하고자 한다.
기본 설정을 스스로 하려니까 막막한데 한 단계씩 나아가니까 그래도 성취감이 있어서 좋은 것 같다 😊
[ 레퍼런스 참조 ]
Babel 직접 적용하며 이해하기
🤔 Babel이란? 바벨은 자바스크립트 컴파일러이다. > Babel is a JavaScript compiler Babel 공식페이지 🔎 컴파일러란? 컴파일러는 특정 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어나 컴퓨터
velog.io
[webpack] 웹팩 기본설정(1) - Loader사용하기(babel-loader,css-loader,style-loader) (velog.io)
[webpack] 웹팩 기본설정(1) - Loader사용하기(babel-loader,css-loader,style-loader)
안녕하세요! 웹팩에 대한 포스팅입니다.2000년대 초반의 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었습니다. 자바스크립트는 DOM을 조작하는 간단한 역할만
velog.io
'개발' 카테고리의 다른 글
| tsconfig.json에 대한 이해 (3) | 2024.06.10 |
|---|---|
| [rollup.js] 환경 설정하기(1) - 오류 해결하기 (0) | 2024.05.13 |
| [Webpack] Webpack 이해하기 - Concepts (2) | 2024.05.02 |
| [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔? (0) | 2024.04.25 |
| 렌더링 이해하기 - 얕은 비교 (Shallow Equal) , 깊은 비교 (Deep Equal) (0) | 2024.01.17 |