프론트엔드를 한다면 필수적으로 알아야할 webpack.
프론트엔드 개발을 하지 않더라도 알아두면 좋은 webpack.
webpack이란?
html에 들어가는 js 파일들을 뭉쳐서 하나로 만들어주는 방식을 모듈 번들링(=webpack_)이라고 한다.
굳이 하나로 뭉쳐서 하나로 만들어야하는 이유는?
1. 한 페이지를 구성하기 위해 존재하는 여러 파일들을 하나의 파일로 만들어 읽기때문에, 웹페이지 성능이 최적화된다.
2. 혼자서 프로그램을 작성할때도 변수명이 겹치는 것을 파악하기 힘든데, 여럿이서 사용한다면 더 힘들어진다. 하지만 하나의 파일로 묶어줌으로써 개발할때 편리해진다.
기초개발 환경세팅
test폴더를 만들고 그 안에 index.html, dist폴더, src폴더를 만든 후 webpack 라이브러리를 설치한다.
$ npm install -D webpack webpack-cli
현재 합칠 파일을 webpack으로 뭉친다
(첫번째 코드가 안될경우, npx를 붙인 두번째 코드를 입력하면 실행가능.)
$ webpack-cli ./src/index.js
$ npx webpack-cli ./src/index.js
실행이 끝나면 dist 폴더 안에 번들된(=하나로 뭉친) 파일이 생긴다.
html파일 안에 src > index.js 파일을 링크를 걸어서 브라우저에서 실행시키면 될 것 같지만 안된다.
<!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>
<script type="text/javascript" src="./src/index.js"></script>
</body>
</html>
대신 번들되어서 dist폴더 안에 생긴 main.js 폴더를 링크해서 렌더하면 실행이 된다.
<!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>
<script type="text/javascript" src="../dist/main.js"></script>
</body>
</html>
webpack.config.js를 통해 번들하기
webpack.config.js 파일을 생성한다.
module.exports = {
entry: "./src/index.js"
}
한꺼번에 리액트 초기설정하기
다음 코드 중 하나를 입력하면 웹팩이 실행이 된다.
$ webpack
$ npx webpack
안될 경우, 라이브러리를 설치하고 실행하면 된다.
$ npm insall -g webpack webpack-cli
설치가 된 상태에서 npm run eject 코드를 실행하면 편집할 수 있도록 script 폴더 config라는 폴더 생긴다.
이러면 이 안에서 babel, webpack.config.js도 모두 설정이 되어있다.
그 외에 궁금한 점은 웹팩 공식 홈페이지에서 찾아보자
https://webpack.kr/guides/hot-module-replacement/#enabling-hmr
'프로그래밍 > react' 카테고리의 다른 글
| [220420] 리액트에서 css 사용하기 (0) | 2022.04.25 |
|---|---|
| [220419] 최소기능으로 리액트 시작하기 / 세부설정하기 (0) | 2022.04.20 |
| [220415] 빙고게임 완성하기 - 02 (0) | 2022.04.17 |
| [220414] 빙고게임 완성하기 - 01 (0) | 2022.04.17 |
| [220414] 리스트로 DB 데이터를 다루는 방법 (0) | 2022.04.17 |
댓글