package.json
"dependencies": {
"-": "0.0.1",
"D": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"babel-loader": "^8.2.1",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0"
}
"@babel/core": "^7.12.3", // 최신문법으로 세팅
"@babel/preset-env": "^7.12.1", //환경에 맞게 세팅
"@babel/preset-react": "^7.12.5", //JSX로 세팅
"babel-loader": "^8.2.1", //babel이랑 webpack연결
index.html
<html>
<head>
<meta charset="UTF-8" />
<title>끝말잇기</title>
</head>
<body>
<div id='root'></div>
<script src='./dist/app.js'></script>
</body>
</html>
노드는 자바스크립트 실행기다.
Client.jsx
const React = require('react');
const ReactDOM = require('react-dom');
//이제 스크립트로 안 불러 오고 노드의 모듈시스템으로 불러옴
const WordRelay = require('./WordRelay');
ReactDOM.render(<WordRelay />, document.querySelector('#root'));
//JSX문법을 쓰면 파일 뒤에 .jsx를 반드시 써준다.
반드시 WordRelay에서 반드시 파일명 첫번째 글자를 대문자로 써줘야 한다.
안할 경우 react-dom처리를 못해준다. (1시간 삽질 ; )
WordRelay.jsx
const React = require('react');
const ReactDom = require('react-dom');
class WordRelay extends React.Component {
state = {
text : 'Hi webpack',
}
render(){
return (
<h1>{this.state.text}</h1>
)
}
}
module.exports = WordRelay;
화면에 출력할 'Hi webpack' 렌더링
webpack.config.js
const path = require('path');
//경로를 쉽게 조작할 수 있다
module.exports ={
name : 'wordrelay-setting',
mode : 'development',
devtool : 'eval', // 빠르게 ?? 하기위해 사용
resolve : {
extensions : ['.js', '.jsx'] //webpack이 알아서 확장자 파일을 찾아준다
//'./client' 를 './client.jsx'로 인식
},
//목표 : client,wordRelay파일을 합쳐 app파일에 출력
entry : {
app : ['./client'], //합치고 싶은 파일 배열에 추가
// client에서 이미 wordRelay파일을 불러오고 있기 때문에
// ['./client.jsx']만 적어줘도 webpack이 인식
}, //입력
module : {
rules : [{
test: /\.jsx?/,
loader : 'babel-loader',
options: {
presets :["@babel/preset-env", "@babel/preset-react"],
plugins :["@babel/plugin-proposal-class-properties"],
},
}],
},
//entry에 있는 파일들을 module을 이용해서 output으로 뺀다.
output :{
path : path.join(__dirname, 'dist'), //path.join: 경로를 합쳐줌
//__dirname : 현재폴더
//현재 파일(lecture)에 있는 'dist'파일을 자동으로 만들어줌
filename: 'app.js',
}, //출력
};
파일명은 webpack.config.js 로 항상 고정
plugins들의 모음은 preset이다.
plugins확장 프로그램 느낌.