Entry(index.js) / OutputFrontend/webpack & babel2023. 9. 3. 23:36
Table of Contents
Entry
- webpack이 dependency 그래프를 생성하는 최초 진입점이며 파일 경로이다.
- 웹팩의 번들링이 시작되는 시작점
- default 경로로는 ./src/index.js로 설정이 되어있다.
// webpack.config.js
// 웹팩을 실행하면 index.js부터 빌드를 수행한다!
module.exports = {
entry: './src/index.js'
}- entry에 들어가는 파일에는 웹 애플리케이션의 시작점과 구조 및 내용이 담긴다.
- 예를들어 react의 index.js파일을 살펴보면 app.js부터 렌더링을 한다는 것을 알 수 있다!
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// ReactDOM.render 함수 첫번째 파라미터를 두번째 파라미터에 렌더링
// App.js를 index.html에 랭더링
// React 컴포넌트를 실제 HTML 문서 내의 DOM 요소에 렌더링!
// 'root' 에 App.js 를 렌더링!!
// index.html 파일 내에서 정의된 root 요소(<div id="root"></div>)에 React 애플리케이션을 마운트!
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();- React의 index.js에 대해 조금만 더 설명하자면 이 부분에서 HTML 템플릿 코드 및 컴포넌트를 조합하여 렌더링한다.
- index.js에 의해 렌더링된 결과가 index.html에 표시된다
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title> <!-- React 애플리케이션이 마운트되는 부분 -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Output
- output은 웹팩으로 번들링 한 결과물(build file)에 대한 경로를 의미한다.
// dist 디렉토리에 bundle.js 파일(빌드 출력물) 생성!
module.exports = {
output: {
filename: 'bundle.js',
},
};- React에서 위와 같이 번들링된 파일을 index.html에서 불러와서 App.js에서 렌더링 할 수 있게 할 수 있다!
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack-for-react</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
'Frontend > webpack & babel' 카테고리의 다른 글
| webpack으로 React 프로젝트 빌드해보기 =) (0) | 2023.10.08 |
|---|---|
| Babel (0) | 2023.10.08 |
| Loader / Plugin (1) | 2023.10.08 |
| webpack (1) | 2023.08.21 |
| webpack과 babel 리액트 프로젝트 생성 (0) | 2022.06.04 |
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
