React webpack 세팅 TIL

장민우·2020년 11월 20일
0
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확장 프로그램 느낌.

0개의 댓글