본문 바로가기
웹/React

리액트 + 웹팩 + 바벨 프로젝트 세팅 시작하기

by void pattern 2021. 2. 26.

 

의존성 초기화, 생성

npm init -y

package.json 패키지에 대한 정보가 담긴 json파일이 자동으로 생성된다.

  • -y : -yes의 축약형으로 명령어를 치면 이름, 버전, 설명, 라이센스 등 여러가지 질문을 하는데 귀찮으니 자동으로 yes라고 입력하게 함
mkdir src public dist
  • src : 리액트 폴더
  • public : 정적 html 폴더
  • dist : 번들링 결과물

 

 

리액트 설치

npm i react react-dom
  • i : install의 축약
  • react : 리액트 라이브러리 
  • react-dom : dom, webapp, browser 관리

 

 

바벨 설치

npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react

 

  • -D : --save-dev의 축약, 개발 단계에서만 사용하기 때문에 devDependencies에 추가함
  • @babel/core : 바벨 코어
  • babel-loader : js파일을 webpack, babel preset/plugin을 이용해 es5문법으로 컴파일, jsx문법으로 js로 컴파일
  • @babel/preset-env : ES6+코드 트렌스파일링, 브라우져 폴리필
  • @babel/preset-react : JSX 트렌스파일링(transpiler)

 

root경로에 babel.config.js 파일을 생성한 후 아래와 같이 작성한다.

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env']
};
  • preset-env : es6+를 변환할 때 사용, 폴리필
  • preset-react : 리액트, 타입스크립트 변환하기 위한 프리셋

 

웹팩 설치

npm i -D webpack webpack-cli webpack-dev-server css-loader style-loader sass-loader node-sass file-loader html-webpack-plugin clean-webpack-plugin
  • webpack : 웹팩 코어
  • webpack-cli : 웹팩의 커맨드라인 인터페이스
  • webpack-dev-server : 실시간 리로드 기능을 갖춘 개발 서버 제공
  • css-loader : css 파일을 js 파일이 이해할 수 있도록 변환
  • style-loader : 변환된 css 파일을 dom에 <style> 태그로 감싸서 삽입
  • file-loader : 이미지, 폰트 등 파일 로딩
  • sass-loader : sass파일을 css로 컴파일
  • html-webpack-plugin : html파일에 번들링된 자바스크립트 파일을 삽입, 번들링된 결과가 저장되는 폴더에 옮겨줌. webpack.config.js에서 사용할 플러그인
  • clean-webpack-plugin : 웹팩으로 번들링할 때마다 이전 번들링 결과와 사용하지 모든 웹팩 에셋 제거

 

 

root경로에 webpack.config.js 파일을 생성한 후 아래와 같이 입력한다.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
	mode: "development",
	entry: './src/index.js',
	output: {
		path: path.join(__dirname, '/dist'),
		filename: 'index_bundle.js',
		publicPath: './dist'
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_module/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\.(c|sc|sa)ss$/,
				use: [
					{ loader: 'style-loader' },
					{ loader: 'css-loader' },
					{ loader: 'sass-loader' }
				]
			},
			{
				test: /\.(png|jpe?g|gif)$/i,
				loader: 'file-loader',
				options: {
					name: '[name].[ext]'
				}
			}
		]
	},
	plugins: [
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin({
			template: './public/index.html'
		})
	],
	devtool: 'eval-cheap-source-map',
	devServer: {
		hot: true,
		overlay: true,
		writeToDisk: true,
		host: "localhost",
		port: 5000
	}
}
  • const path = require('path') : 파일 경로 설정할 때 사용
  • const HtmlWebpackPlugin = require('html-webpack-plugin') : index.html 파일을 압축해 dist 폴더에 index_bundle.js 생성하기 위한 플러그인
  • entry: './src/index.js' : 애플리케이션 진입점인 엔트리 파일 지정. 엔트리를 통해 모듈을 로딩하고 하나의 파일로 묶음.
  • output: 컴파일 후 번들링될 파일 지정
  • __dirname : 노드 변수로 현재 모듈의 디렉토리를 리턴
  • path: path.join(__dirname, '/dist') : path는 절대경로로 dist폴더에 컴파일된 하나의 번들 파일을 생성해 넣음
  • module : 모듈에 적용할 여러가지 로더들과 옵션을 추가함
  • test: 어떤 파일을 적용할지 확장자 명시함
  • use: 배열로 설정 가능
  • exclude: /node_module/ : 속도 이슈로 node_module 폴더는 컴파일 제외
  • loader: 'babel-loader' : 바벨로더가 파이프를 통해 js 코드 가져옴
  • template: './src/index.html' : 생성한 템플릿 파일
  • plugin: 웹팩의 기본 동작과 추가 기능을 제공해주는 속성
  • devtool: 어디에서 오류가 발생한 것인지 도와주는 도구
  • devServer: webpack-dev-server옵션 설정

package.json 내용 추가

웹팩에서 개발/프로덕션 모드가 있기 때문에 구분해둔다.

 "scripts": {
    "dev": "webpack serve  --progress --mode development",
    "build": "webpack --progress --mode production serve"
  },

콘솔에서 npm run dev로 실행할 수 있다.

 

 

리액트 컴포넌트 생성

src/App.js

import React from 'react';


function App() {
	return (
		<div className="App">
			<div className="container" />
		</div>
	)
};

export default App;

 

src/style.scss 

.container {
	width:100px;
	height:100px;
	background-color: tomato;
}

 

src/index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './style.scss';
import App from './App';

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
);

 

public/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>test</title>
</head>

<body>
	<div id="root"></div>
</body>

</html>

 

 

 

 

  

 

저작자표시 비영리 변경금지

'웹 > React' 카테고리의 다른 글

npm 설치 오류 메시지 code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree  (0) 2021.04.25
React 튜토리얼 1강. 리액트 설치 및 세팅  (0) 2020.12.31
React(리액트)란? 리액트 처음 시작하기  (0) 2020.07.04

관련글

댓글

티스토리툴바