영상링크
소개
완전히 비어있는 작업 공간에서 시작하여 모든 디펜던시를 설치하고 리액트 코드로 이루어진 모든 구성 파일을 가져온 다음 브라우저에서 사용할 수 있도록 변환하고, 몇가지 플러그인과 사용 방법을 소개한다.
설정
-
만들고자 하는 프로젝트 폴더로 가서
npm init -y를 실행한다. 그 후 모든 기본값을 그대로 담은package.json을 만든다. -
그 후
npm i react react-dom을 설치해서 react를 실행시키기 위한 디펜던시를 불러온다. -
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader file-loader css-loader sass-loader sass webpack webpack-cli style-loader를 설치한다.
그러면 package.json의 디펜던시에는 위 사진과 같이 나올것이다. 설치한 목록중 sass sass-loader두 개는 sass파일을 css로 변환하는 작업을 처리하고 css-loader는 css를 index.html에 로드하고, style-loader는 html 출력에 새 스타일 태그를 만들고 sass에서 변환된 모든 스타일을 로드한다.
- 그 후 프로젝트 root폴더에
.babelrc파일을 만들고 다음과 같이 작성한다.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}React Webpack 구성 (React, Webpack, babel)
- 또 root폴더에
webpack.config.js파일을 생성한다.
const path = require('path');
module.exports = {
output: {
path: path.join(_dirname, '/dist'), // path라이브러리 사용해서 /dist 폴더경로로 번들파일 경로설정
filename: 'index.bundle.js' // 웹팩 결과 파일이름
},
devServer: {
port: 3010, // 실시간으로 빌드파일 보는 포트
watchContentBase: true, // 실시간 변경 확인
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/, // 정규식으로 어떤 확장자의 파일을 번들링으로 가져갈건지 알려줘야한다.
exclude: /node_modules/, // 노드 모듈은 이미 컴파일이 되어 앱 내에서 사용할 준비가 되어있어 또 번들링 해줄 필요가 없으므로 제외한다.
use: { // 위의 test에서 가져온 확장자 파일들을 어떤 로더로 파싱해올 것인지 알려줘야한다.
loader: 'babel-loader'
}
},
{
// css 번들링할때 사용해줄 로더
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
]
}
}webpack.config.js
-
output: 웹팩을 통해 만들어진 파일 번들을 저장하는 곳을 지칭한다.
ㄴ 번들: 로더를 통해 만들어진 브라우저에 실제 구동되는 파일 -
devServer: 개발 서버를 설정한다. -
module: 웹팩의 라이브러리를 세팅하는 것.package.json에서 디펜던시와 비슷한 기능을한다.
React 소스파일
위 세팅을 마치면 root폴더에 src폴더를 생성하고 기본적인 리액트 앱을 위한 세팅을 사진과 같이 한다.
그 후 각 파일에 대해 다음과 같이 작성한다.
App.js
import React from 'react';
export function App() {
return(
<div>
<h1>Welcome {new Date().toDateString()}</h1>
</div>
);
}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>React App</title>
</head>
<body>
<div id='app'></div>
<!-- 중요! 번들링 된 파일을 가져와야함 -->
<script src='index.bundle.js'></script>
</body>
</html>index.js
require('file-loader?name=[name].[ext]!./index.html');
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
import './App.scss';
const appElement = document.getElementById('app');
ReactDOM.render(<App />, appElement);App.scss
h1 {
color: blue;
}웹 팩 시작
위의 설정이 끝나면 package.json에 스크립트를 추가해주고 npm run start를 터미널에 입력한다.
package.json
"script": {
"start": "webpack serve --mode development"
}이때 터미널에서 무언가를 설치할거냐고 물어볼건데 y해주면 된다.
React Webpack 프로덕션 빌드
이제 간단한 리액트 앱을 웹팩으로 번들링 할수있도록 만들었다. 배포를 하기전 빌드가 필요한데, 이를 알아보자.
package.json
"script": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}build스크립트를 추가하고 npm run build를 터미널에 입력한다.
그러면 몇 초후 webpack설정 해두었던 dist폴더가 생기며 안에 index.bundle.js를 만들어냈다.
또, dist폴더안의 index.html을 Live server등으로 실행하거나 브라우저에서 열면 개발중이던 파일 그대로 나타난다!
최적화 / 플러그인
만약 css파일을 별도로 번들링 하고 싶다면 어떻게 하면 좋을까?
npm i -D mini-css-extract-plugin으로 설치해주자.
그 후 webpack.config.js를 고쳐주자.
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
output: {
path: path.join(_dirname, '/dist'),
filename: 'index.bundle.js'
},
devServer: {
port: 3010,
watchContentBase: true,
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
]
},
plugins: [new MiniCssExtractPlugin()],
}그 다음 src폴더의 index.html의 head를 고쳐주자.
<!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>React App</title>
<link rel="stylesheet" href="main.css"></link>
</head>
<body>
<div id='app'></div>
<script src='index.bundle.js'></script>
</body>
</html>이렇게 하면 개발중인 앱에서도 번들링된 css파일을 가져와 사용할수 있게 된다.
