[출처]최원장튜터님
1. 프로젝트 초기화
mkdir my-react-app
cd my-react-app
npm init -y
2. 리액트 및 웹팩 설치
yarn add react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
3. 바벨 설치 및 설정
바벨 관련 패키지 설정
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
바벨 설정 파일 생성(.babelrc)
{"presets": ["@babel/preset-env", "@babel/preset-react"]}
4. 웹팩 설정
웹팩 설정 파일 생성(webpack.config.js)
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000
}
};5. HTML 및 리액트 소스 파일 작성
public > index.html 파일 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>src > index.js 파일 생성
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));src > App.js 파일 생성
import React from 'react';
function App() {
return <h1>Hello, React!</h1>;
}
export default App;6. 스크립트 추가
package.json 파일에 스크립트 추가
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode production"
}