개발일기

React - Webpack + Babel 로 프로젝트 생성하기 본문

Javascript/React.js

React - Webpack + Babel 로 프로젝트 생성하기

Flashback 2021. 10. 6. 14:56
728x90
반응형

1. package.json 생성

npm init -y

yarn init -y

 

2. 리액트관련 라이브러리 추가

npm install -D react react-dom

yarn add -D react react-dom

 

3. 웹팩관련 라이브러리 추가

npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

 

4. 바벨관련 라이브러리 추가

npm install -D @babel/cli @babel/core @babel/preset-env @babel/preset-react

yarn add -D @babel/cli @babel/core @babel/preset-env @babel/preset-react

 

5. 로더관련 라이브러리 추가

npm install -D babel-loader html-loader

yarn add -D babel-loader html-loader

로더를 통해 js, css 또는 html 파일들을 자바스크립트 파일로 변환할 수 있다.

특히 babel-loader를 설치함으로써, babel.config.js 또는 .babelrc로 구성된 바벨 설정 파일을 읽어들여 해당 바벨 설정에 맞게 변환시킨다.

 

6. babel.config.js 파일 생성

module.exports = {
	presets: [
		'@babel/preset-env',
		'@babel/preset-react',
	]
}
  • @babel/preset-env를 추가함으로써 es6이상의 버전으로 된 소스코드를 변환할 수 있다.
  • @babel/preset-react를 추가함으로써 리액트의 JSX 코드로 구현된 소스코드를 변환할 수 있다.

 

7. webpack.config.js 파일 생성

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/",
  output: {
	path: path.resolve(__dirname, "build"),
	filename: "bundle.js",
  },
  resolve: {
	modules: [path.join(__dirname, "src"), "node_modules"],
	alias: {
		react: path.join(__dirname, "node_modules", "react"),
	},
  },
  module: {
	rules: [
	  {
		test: /\.(js|jsx)$/,
		exclude: "/node_modules",
		use: {
		  loader: "babel-loader",
		},
	  },
	  {
		test: /\.css$/,
		use: [
		  {
			loader: "style-loader",
		  },
		  {
			loader: "css-loader",
		  },
		],
	  },
	  {
		test: /\.html$/,
		use: [
		  {
			loader: "html-loader",
			options: { minimize: true }
		  }
		]
	  }
	],
  },
  plugins: [
	new HtmlWebPackPlugin({
	  template: './src/index.html'
	})
  ]
};

 

8. src 폴더에 index.html, index.js, App.js 파일 생성

  • 8-1. index.html
<!-- index.html -->
<!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>
	<div id="root"></div>
	<script src="./index.js"></script>
</body>
</html>

리액트는 기본적으로 SPA ( Single Page Application ) 이다. 하나의 html파일에 다른 js 파일들을을 가져와 렌더링하며 페이지이동없이 웹을 구현할 수 있다. 

id가 root인 곳을 통해 다른 자바스크립트 파일들을 렌더링할 것이기에 <div id="root"></div> 를 선언하였다. 그 아래에 있는 <script src="./index.js"></script>는 처음으로 추가할 자바스크립트 파일을 정의한 것이다. index.js를 기준으로 내부코드에 따라 여러 자바스크립트 파일들이 렌더링된다.

 

  • 8-2. index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

id가 root인 태그안에 App.js를 그려넣는다는 뜻이다.

 

  • 8-3. App.js
import React from 'react';

const App = () => {
	return (
		<>
			<div>
				App + Webpack + Babel
				<h1>Main Component Start!</h1>
				<h2>webpack watch test</h2>
			</div>
		</>
	)
};

export default App;

JSX 코드를 사용하는 파일에서는 import React from 'react'를 필수적으로 입력해야 한다.

 

9. package.json 파일 수정

"scripts": {
	"start": "npx webpack serve --mode development --port 3000"
}

앞서 설치했던 webpack-dev-server를 통해 3000번 포트에 개발서버를 열어준다는 뜻이다.

webpack-dev-server를 사용함으로의 장점은 코드가 바뀔 때 마다 수동으로 빌드를 해줄 필요가 없다는 큰 장점이 있다. webpack-dev-server가 소스코드의 변경을 감지하여 코드가 바뀔 시, 변경된 내용을 바로바로 반영해주기 때문이다.

 

10. npm start를 통해 실행

 

소스코드 깃허브 주소 -

https://github.com/FlashBack102/react-webpack-babel-setting

 

GitHub - FlashBack102/react-webpack-babel-setting

Contribute to FlashBack102/react-webpack-babel-setting development by creating an account on GitHub.

github.com

 

728x90
반응형

'Javascript > React.js' 카테고리의 다른 글

React - Route로 컴포넌트 렌더링하기  (0) 2022.02.11
React - HashRouter, BrowserRouter의 차이  (0) 2022.02.09
React.js 설치방법 ( Node.js 포함)  (0) 2021.09.30
React.js - props  (0) 2021.08.09
React.js - JSX란?  (0) 2021.08.02
'Javascript/React.js' Related Articles more
Comments