React webpack

jeon-yj·2022년 3월 13일
0

React

목록 보기
6/7
post-thumbnail

웹팩?

모듈 번들러 라이브러리 중 하나로 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리이다. 다른 모듈 번들러로 Parcel이 있다.
많은 자바스크립트 파일을 쓰일 때마다 서버에 요청하게 된다면 큰 웹페이지에서는 시간이 많이 소요되고 비효율적일 것이다. 이런 문제를 해결하기 위해 모듈이라는 개념이 생기고, 모듈을 브라우저들이 지원 할 수 있는 코드로 변환하는 것이 모듈 번들러 라이브러리이다.

웹팩 세팅

인프런 "웹 게임을 만들며 배우는 React"-조현영 (2019)강의를 듣고 작성한 내용입니다. react 업데이트에 따라 다를 수 있습니다. + 오타 있을 수도..!

npm init
npm i react react-dom
npm i -D webpack webpack-cli //-D는 개발용 다운로드
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
//jsx를 쓰려면 바벨을 다운받아야한다. 바벨을 쓸 수 있게, 바벨을 브라우저에 맞게 문법 변환하는, 바벨을 웹팩과 연결해주는..npm 다운
react 폴더에 파일 생성

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

//client.jsx
const React=require('react');
const ReactDom=require('react-dom');
const 컴포넌트명=require('경로');
ReactDom.render(<Example />,document.querySelector('#root'));

간단히 화면에 보여주고 싶은 컴포넌트 만들고

//Example.jsx
const React=require('react');
const {Component}=React;
class Example extends Component{
  render(){
    return <h1>This is Example</h1>;
  }
}
module.exports=Example;
//index.html
...
<body>
  <div id="root"></div>
  <script src="./폴더명a/app.js"></script>
</body>
...

다시 webpack.js로 가서 작성한 파일을 기반으로 웹팩을 하기위한 설정을 적는다.

const path=require('path');
module.exports={
  name:'my-react-app-setting', //app 설명
  mode:'development', //개발용, 실서비스 일경우 production
  devtool:'eval', //빠르게
  resolve:{
    extensions:['.js','.jsx'] //파일 확장자 설정
  },
  entry:{
    app:['./client'], // parent 컴포넌트만 적어도 된다.
  }, // 입력
  module:{
    rules:[{
      test:/\.jsx?/, //가지로올 파일 정규식
      loader:'babel-loader',//js파일과 jsx파일에 바벨 적용하겠다.
      options:{
        presets:['@babel/preset-env','@babel/preset-react' ],
        plugins:['@balbel/plugin-proposal-class-properties'],//문법 업데이트로 불필요하다는 질문글이 있었음. 확인 필요
      },
    }],
  },//모듈 적용
   
  output:{
    path:path.join(__dirname,'폴더명a'),
    filename:'app.js'
  }, //출력
};
  

webpack를 실행하는 방법으로는

//package.json
"scripts":{
  "dev":"webpack"
},

명령어 설정 후

npm run dev

하는 방법과 간단하게 아래 명령어를 쳐서도 실행할 수 있다.

npx webpack

이렇게 실행해보면 app.js 파일이 생긴다!
즉 내가 만든 파일들이 app.js로 합쳐져 index.html로 쏴지는 것이다.

profile
공부는 왜 하는걸까

0개의 댓글