Computer/react

211019 리액트 입문 3 웹팩

COCSOS 2021. 10. 20. 00:00

#웹팩의 기본 개념

 

 다양한 기능

 - 파일 내용을 기반으로 파일 이름에 해시 적용 (브라우저 캐싱 이용)

 - 미사용 코드 제거

 - js 압축

 - js 에서 css,json, txt 를 일반 모듈처럼 부르기

 - 환경변수 주입

 - ***모듈 시스템 사용가능(ESM,commonJS) 각각 ES6 , 노드에서 많이 사용

 

#모듈 시스템?

// 어떤 파일1 file1js

export default funciton funcx(){}

export funciton func2(){}

export const varri1  =123;

export let vari2 = 'hel';

//다른 파일2 file2.js

import myFunc1,  {func2, varri1, vari2} from './file1.js';

//다른 파일 3 file3.js

import {func2 as myFunc2} from '.file1.js';

 

ESM 문법으로 이렇게 사용가능하다.

AS-IS

  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="file3.js"></script>

TO-BE

	<script type = "text/javascript" src="app.js"></script>

파일 참조가 간단데스네!

변수 이름 충돌 등 빌드단계에서 잡을 수 있다.

 

요즘은 브라우져에서 ESM을 지원하긴 한다!

그러나

1.옛날 브라우져는 지원하지 않음.

2. common.js 는 지원 X

이기때문에 웹팩을 설치할 필요가 있다.

 

#웹팩 설치하기

$ npm install webpack webpack-cli react react-dom

 

#웹팩 실행하기 - 번들링하기

$ npx webpack

 

# 웹팩 실행 예제

우선 웹팩을 적용하기 위해 모듈로 새로 나눈 파일.

 

//Button.js

import React from 'react';

function Button(props){
	const [liked, setLiked] = React.useState(false);
	return React.createElement('button', 
	{onClick:()=>setLiked(!liked)},
	props.label,
	);//<button onClick={()=>setLiked (!liked)}>{text}</button>
}

export default Button

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Button.js';

function Container(){
	return React.createElement(
		'div'
		,null
		,
		React.createElement('p', null,'버튼 클릭'),
		React.createElement(Button, {label:'좋아좋아'}),
		React.createElement(Button, {label:'싫다'}),

	);
}

const domContainer = document.getElementById('root');
ReactDOM.render(React.createElement(Container), domContainer);


//index.html
<html>
	<body>
		<h2>하이 22</h2>
		<div id="root"> </div>
		<script src="dist/main.js"></script>
	</body>
</html>

 

1. index.html 로 실행한다

스크립트 가져올때 main.js 는 위 소스 파일 중에 없는데?

=> 웹팩의 결과물이 dist/main.js에 종합되어 자동으로 생성되므로 웹팩으로 돌린 뒤 == *번들링*  실행할 수 있다.

 

2.  Button.js 내부에서

import와  export ... 라인이 없으면 번들링은 되는데 브라우져 스크립트 에러가 난다 

minified react error 130