React Basic (리액트 환경설정)
React를 개발하며 아주 기본적인 설정들을 정리한다.
프로젝트 생성 후 환경설정
npm init
npm i react react-dom
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin
npm i -D webpack webpack-cli webpack-dev-server
webpack 왜 쓰는지?
: 여러 파일(.js, .jsx ...) 을 하나의 파일로 합쳐서 app.js파일로 만들어줌
최신 문법들을 옛날 브라우저에서도 돌아갈 수 있도록 만들어줌
webpack.config.js 파일 생성 후 환경설정
webpack.config.js
const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
name: ***,
mode: 'development',
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx']
},
entry: {
app: ['./Client'],
},
module:{
rules: [{
test:/\.jsx?$/,
loader: 'babel-loader',
options:{
presets: [
['@babel/preset-env',{
targets: {
browsers: ['> 1% in KR'],
}
}],
'@babel/preset-react'
],
plugins: [
'@babel/plugin-proposal-class-properties',
'react-refresh/babel'
],
}
}],
},
plugins: [
new RefreshWebpackPlugin()
],
output: {
filename: 'app.js',
path: path.join(__dirname, 'dist'),
},
devServer: {
devMiddleware: { publicPath: '/dist/' },
static: { directory: path.resolve(__dirname) },
hot: true
}
}
package.json 파일
{
"name": "***",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve --env development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "***",
"license": "***",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0"
},
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
"babel-loader": "^8.2.4",
"react-refresh": "^0.11.0",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}
}
Author And Source
이 문제에 관하여(React Basic (리액트 환경설정)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sysout-achieve/React-Basic저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)