CRA를 사용하지 않는 이유
- 불필요한 모듈의 설치
- Webpack.config.js를 이용해 여러 옵션을 변경할 필요가 있을 경우
프로젝트 생성 하기
npm init -y
or
yarn init -yreact를 사용하기 위한 기본 설치 패키지
npm i react react-dom // react 개발에 필요
npm install --save-dev webpack // 웹팩 기본 라이브러리
npm i --D webpack-cli // 웹팩을 명령어로 사용하기 위한 라이브러리
npm i --D html-webpack-plugin // html을 webpack으로 번들링 하기 위한 라이브러리
npm i --D webpack-dev-server // 웹팩을 이용한 로컬 테스트용 라이브러리
npm i --D babel-loader // 버전 호환을 위한 기본 라이브러리
npm i --D @babel-core // 코드에서 직접 바벨로 컴파일 할때 사용하는 라이브러리
npm i --D @babel-preset-env // babel에서 가장 많이 쓰는 플러그인 모음
npm i --D @babel-react // babel에서 많이 쓰이는 react용 플러그인 모음
* i = install
* --save-dev = --D패키지를 설치 후 package.json파일을 확인 하면 아래와 같다
package.json
{
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open",
},
"devDependencies": {
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.17.0",
"@typescript-eslint/parser": "^5.17.0",
"babel-loader": "^8.2.4",
"eslint": "^8.12.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"html-webpack-plugin": "^5.5.0",
"prettier": "^2.6.2",
"source-map-loader": "^3.0.1",
"ts-loader": "^9.2.8",
"ts-node": "^10.7.0",
"typescript": "^4.6.3",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1"
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}script 명령어를 추가해 준다.
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open",
},babel-loader를 사용하기 때문에 .babelrc 파일은 필요없다 필요한 경우 아래와 같이 작성한다.
root 디렉토리에 .babelrc 파일 생성
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": []
}빌드 및 개발 테스트를 위한 webpack설정을 작성한다.
아래는 샘플 webpack.config.js 파일이다 참고만 하자
root 디렉토리에 webpack.config.js파일 생성
webpack.config.js
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 번들 파일 생성 위치
const bundlePath = path.resolve(__dirname, 'dist/');
module.exports = (_env, argv) => {
let entryPoints = {
main: {
path: './src/index.jsx',
outputHtml: 'main.html',
build: true
},
config: {
path: './src/config.jsx',
outputHtml: 'config.html',
build: false
}
};
let entry = {};
// 웹팩 플러그인 추가 구성
let plugins = [new webpack.HotModuleReplacementPlugin()];
Object.entries(entryPoints).map(([key, value]) => {
if (value.build) {
entry[key] = value.path;
if (argv.mode === 'production') {
plugins.push(
new HtmlWebpackPlugin({
inject: true,
chunks: [key],
template: './public/template.html',
filename: value.outputHtml
})
);
}
}
return null;
});
let config = {
entry,
optimization: {
minimize: true // 불필요한 코드 최적화
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: []
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
filename: '[name].js',
path: bundlePath
},
plugins
};
if (argv.mode === 'development') {
config.devServer = {
static: './public',
host: 'localhost',
// host: '192.168.0.242',
// host: '0.0.0.0',
port: 3008,
historyApiFallback: {
index: 'index.html' //다중 엔트리 이기 때문에 시작시 기본 사용할 페이지를 지정해 준다. 해당페이지는 http://localhost:3008/ 기본URL의 index page가 된다.
},
hot: true // 테스트 구동과 동시에 기본페이지가 오픈된다.
allowedHosts: ['domain'],
};
config.performance = {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
};
config.output = {
// publicPath: "/",
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
};
}
return config;
};
- 주의
static : 테스트가 구동될때 기본으로 사용할 위치
구버전 contentBase가 static으로 변경
./public 폴더에 index.html이 있어야 구동됨.
template 속성에 값을 실제 파일이 있는 위치로 설정 해야함.
빌드 및 테스트 구동을 위해 아래 파일을 추가한다.
빌드시 사용할 template 페이지
template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./main.bundle.js"></script>
</body>
</html>
테스트 구동시 사용할 index 페이지
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="main.js"></script>
</body>
</html>
기본 설정은 모두 완료다
Hello World를 출력해 보자
아래 페이지를 작성한다.
index.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello World</div>,
document.getElementById('example')
);
빌드
npm run build // 빌드 ./dist 페이지에 빌드 파일이 생성된다.
or
npm run start // 테스트 구동 웹페이지가 자동으로 팝업된다.by Kazel
arenacast team blog