개발노트

3. (1)webpack 본문

React/basic

3. (1)webpack

aloha2jh 2020. 7. 14. 23:14

웹팩을 쓰는 이유 ?

 

한파일에 코드가 1000줄 2000줄 이렇게 길어지면

유지보수가 어려워짐

 

src="modal.js" 로 나눠도 (같은 코드 여러번 가져와서 쓰는거니까)

코드의 중복이 발생

 

여러 자바스크립트 파일을 하나의 자바스크립트로 합쳐주는 것이 웹팩

+바벨도 적용할수 있고,  console.log도 제거할수있음 !

 

(웹팩을 자바스크립트 실행기(노드)가 실행해주기 때문에 

노드 알아야 함. 물론 node, npm 도 깔아야 함 )

 

 

node 설치후, cmd로 webpack 과 react를 설치하기

//원하는 폴더로 이동후

npm init 

npm i react react-dom

npm i -D webpack webpack-cli

//-D 는? 나는 개발용으로만 웹팩쓸꺼야 이뜻.

 

package.json 에 잘 설치된걸 확인

 

 

webpack config와 client.jsx 파일 만들기

설치한 react, react-dom을 불러온다

//webpack.config.js
module.exports = {

};
// client.jsx
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./wordrelay');

ReactDom.render(<WordRelay />, document.querySelector('#root')  );

 

만들고자하는 jsx 파일

//wordrelay.jsx
const React = require('React');
const { Component } = React;

class WordRelay extends React.Component{   
    state = {
        text: 'hi, webpack ...'
    }
    render(){  
        return (
            <p>{this.state.text}</p>
        )
    } 
} 
module.exports = WordRelay;

 

 

 

노드에서 불러왔기 때문에 html에서 이제 없어도 된다

<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>끝 말 잇 기</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./dist/app.js">

        </script>
    </body>
</html>

<Gugudan /> 같이 xml + js = jsx 

확장자가 jsx 이면 리액트 전용파일이라는걸 알수있어서

jsx문법쓰면 jsx를 붙여주도록 하자

 

 

파일을 쪼개는 경우에는... (노드의 모듈 시스템)

가져다 쓴다

: 쪼갠 파일(컴포넌트)에서 필요로하는부분(사용하는것들) 다 가져와야 된다는점 

내보낸다

:이컴포넌트를 바깥에서도 쓰게해주게 내보내야 된다

 

 

app.js파일을 하나 만들어서

HTML 에서는 하나의  js파일을 실행할 수 있도록 해주는것이 목표

 

웹팩 설정파일에서 웹팩이 그렇게 해주도록 설정해보자

//webpack.config.js

const path = require('path');

module.exports = {
    name:'wordrelay-setting', //붙이고싶은 이름
    mode:'development',     // 실서비스땐 production 
    devtool:'eval',         // hidden-soruce-map
    
    resolve:{
        extensions:[ '.js', '.jsx']
    }, 
    entry:{
        //app: ['./client.jsx', './wordrelay.jsx'],
        app: ['./client'],

    }, //입력
    
    output:{
        path: path.join(__dirname,'dist'),
        filename:'app.js'
        
    }, //출력

};

entry입력: 내가 만든 react파일들  이거( client.jsx ) 이거( wordrelay.jsx ) 합쳐서

output출력: dist/app.js에 만들어줘 라는 설정

 

devtool은 개발일때 eval /production일때hidden-source-map

Source Map이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능

 

client파일에서wordrelay를 불러와서 쓰고있기 때문에 써줄필요없음 

css, json 다 넣을수 있어서 확장자들 생략 가능하도록 resolve 라는 옵션을 추가

 

const path = require('path');

module.exports = {
    name:'wordrelay-setting', 
    mode:'development',    
    devtool:'eval',         
    resolve:{
        extensions:[ '.js', '.jsx']
    }, 
    entry:{
        app: ['./client'],

    },  
    output:{
        path: path.join(__dirname,'dist'),
        filename:'app.js'
    },  
};

 

 

웹팩실행 명령어인 npx webpack 하면

(.bin안에 있는 cli들을 실행시켜주는 편리한 npx를 사용)

npx webpack

jsx를 쓸수있게 해주는 바벨을 설치안했기 때문에 에러가 난다

'React > basic' 카테고리의 다른 글

3. (3)웹팩설정 @babel/preset-env / plugins  (0) 2020.07.15
3. (2)babel  (0) 2020.07.15
2. Hooks  (0) 2020.07.14
1. (3) 구구단게임  (0) 2020.07.14
1. (2)HTML속성, 상태(State), JSX  (0) 2020.07.13
'React/basic' Related Articles more