웹팩?
모듈 번들러 라이브러리 중 하나로 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리이다. 다른 모듈 번들러로 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로 쏴지는 것이다.
