Create a React Application without CRA

리엑트 프로젝트를 CRA(Create React App)명령어를 통해 시작을 하면 세팅이 거의 되어 있어서 좋지만, 프로젝트 후반부에 무언가 설정을 커스텀하게 바꾸려면 세팅 파일이 숨어(?) 있어서 굉장히 어렵다. 물론, 끄집어 낼 수 있지만 그렇게 되면 파일이 복잡하기만 하고 에디터에서 오류가 나고 여러모로 좋은 상황이 아니게 된다.

웹펙 기반으로 처음부터 커스텀하게 세팅한다면 좋을것이다.

// install node modules
npm i react
npm i react-dom
npm i -D webpack
npm i -D webpack-cli
npm i -D webpack-dev-server
npm i -D html-webpack-plugin
npm i -D babel-loader
npm i -D @babel/core
npm i -D @babel/preset-react
npm i -D @babel/preset-env

// package.json
{
	"scripts": {
		"start": "webpack-dev-server --mode development --open --hot",
		"build": "webpack --mode production"
	}
}


// webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env', '@babel/preset-react']
					}
				}
			}
		]
	},
	plugins: [
		new HTMLWebpackPlugin({
			tempalte: './src/index.html'
		})
	]
}

// index.js
import React from 'react'
import ReactDom from 'react-dom'
import App from './components/App'

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

참고