무작정 create-react-app 을 사용하다가 cra가 무슨일을 해주는지 궁금해서 직접해봄.
create-react-app 이 도대체 무엇을 해주는지 알수있다.
webpack , babel 의 역할을 알고 프로젝트 설정을 직접 관리 할 수 있다.
직접 커스텀하여 프로젝트를 생성,관리하면서 npm,webpack,babel 을 공부하고
전반적인 개발환경의 이해도가 높아진다.
빈 폴더에 프로젝트 설정 파일인 package.json을 생성한다.
npm init
// package.json 파일을 손쉽게 만들어주는 명령어
// -y 옵션을 붙일시 전부 디폴트값으로 빠르게 만들어 줌
npm i react react-dom
바벨을 설치한다. 트랜스파일러인데 크로스 브라우싱 및 폴리필을 알아서 해줍니다.
JSX 코드를 자바스크립트 코드로 변환하기 위해선 바벨을 설치해야 한다.
개발시에만 필요하기때문에 개발의존성에만 추가한다. ( -D 옵션을 붙여준다 )
npm i -D @babel/core @babel/preset-env @babel/preset-react
@babel/core: 바벨의 코어
@babel/preset-env: 문법버전을 사용자 브라우저 환경에 맞게 바꿔줌
@babel/preset-react: JSX파일을 JS로 트랜스파일링
웹팩을 설치한다. 웹팩은 번들러로 여러 파일을 최소한으로 묶어주며
유지보수가 쉬운 모듈단위의 코딩을 도와주고 네트워크 병목현상을 줄여줍니다.
npm i -D webpack webpack-cli webpack-dev-server
webpack-cli : 설치시 터미널에서 웹팩명령어 명령가능
webpack-dev-server : 메모리상에만 존재하는 개발서버이다.
npm i -D babel-loader css-loader style-loader file-loader
babel-loader : 웹팩과 바벨을 이어준다.
css-loader : css파일을 모듈로 변환해줌
style-loader : 변환된 css 을 dom에 붙여준다.
file-loader : 프로젝트에서 사용하는 파일(이미지,폰트..)을 모듈로 변환해준다.
npm i -D html-webpack-plugin clean-webpack-plugin
html-webpack-plugin : html파일에 js 번들을 자동으로 묶어주는 플러그인
clean-webpack-plugin : 빌드 이전 결과물을 제거하는 플러그인
루트폴더 안에 dist 폴더를 생성한다. ( 번들링 결과물이 모일예정 )
public 폴더 생성 후 index.html을 생성
src 폴더 생성 후 app.js , index.js 생성
webpack.config.js 생성
babel.config.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>
<div id="root"></div>
</body>
</html>
index.html
import React from "react";
import ReactDom from "react-dom";
import App from './app'
import './app.css';
ReactDom.render(<App/>,document.querySelector('#root'))
index.js
import React from 'react'
function app() {
return (
<div>안녕하세옹</div>
)
}
export default app
app.js
#root{
background-color: hotpink;
}
app.css
const path = require('path')
// Node.js 의 빌트인 객체 'path' , 경로를 사용할때 유용하다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 웹팩 플러그인을 import 해준다.
module.exports={
mode:'development',
resolve: {
extensions: ['.js', '.jsx'],
},
entry: './src/index.js' // 번들링 진입점. index.js 에 들어가 여러 파일을 추적
,
output:{
path:path.resolve('./dist'), // 번들링 결과물 경로,이름 지정
filename:'bundle.[hash].js'
},
module:{ // 불러올 여러 파일들의 형태 , 로더 설정
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.png$/,
use:[
{
loader:'file-loader',
options:{
name:'[name].[ext]?[hash]'
}
}
]
},
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
use:[
{
loader:'babel-loader',
},
]
},
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./public/index.html' // 번들링 한 js를 어디에 묶을건지
})
],
devServer: { // 개발서버 세팅
host: 'localhost',
port: '3000',
open: true,
//historyApiFallback: true,
hot: true, // 변경된 점 즉시 반영
},
}
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};
"scripts": {
"build": "webpack --progress --mode production",
"start": "webpack-dev-server"
},
드디어 완료 ! 터미널에 npm start 입력시 개발서버가 잘 구동되는것을 볼수있다.