# 웹팩 설치하기
웹팩을 왜쓸까?
-실제 개발환경에서 component를 여러개를 사용해야 한다.
-컴포넌트마다 script를 사용하면 너무 길어져서 유지보수가 불가능하다.
-여러개의 js 파일을 한번에 합쳐서 한개의 js파일로 만드는 기술이 웹팩이다.
-합치면서 바벨적용 + 쓸모없는 코드 제거가 가능하다.
*React에서 node가 필요한 이유
-자바 스크립트 실행기가 필요해서
-웹팩을 돌리기 위해서
사용하는 순서
npm init
npm i react react-dom
npm i -D webpack webpack-cli
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/plugin-proposal-class-properties
"@babel/core": "^7.10.5", // 기본적인 babel, 최신문법 지원
"@babel/preset-env": "^7.10.4", // 환경에 맞게 바꿔줌
"@babel/preset-react": "^7.10.4", // react jsx 바꿔줌
"babel-loader": "^8.1.0", // babel이랑 webpack 연결해줌
-D는 개발에서만 사용되는것을 의미함. (webpack은 개발이 끝나면 필요없음)
client.js
//client.js
const React = require("react");
const ReactDom = require("react-dom");
//이걸 사용해서 script로 react,react-dom을 안불러와도 된다.
webpack.config.js
//webpack.config.js
module.exports = {};
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>이거를 자동화 하는것이 create-react-app이다.
# 모듈, 웹팩 설정
#webpack.config.js
//webpack.config.js
const path = require("path");
module.exports = {
name: "word-relay-setting",
mode: "development", // => 실서비스: production
devtool: "eval", //빠르게 하겠다.
resolve: {
extensions: [".js", ".jsx"],
},
entry: {
app: ["./client"],
}, //입력
output: {
path: path.join(__dirname, "dist"), // path.join은 현재 폴더에서 경로 설정
filename: "app.js",
}, //출력
};
//여러개 파일을 합쳐서 app.js 한개만 쓰게 하려고 한것.
//clinet.jsx에서 WordRelay.jsx를 불러오기 때문에 따로 넣을 필요는 없다. (resolve가 있으면 확장자도 안넣어도 된다.)
#client.jsx
#client.jsx
const React = require("react");
const ReactDom = require("react-dom");
//필요한것만 불러올 수 있다.
const WordRelay = require("./WordRelay");
ReactDom.render(<WordRelay />, document.querySelector("#root"));
//이걸 사용해서 script로 react,react-dom을 안불러와도 된다.
// .jsx는 jsx문법을 쓰고 있다. react 전용 파일이다를 알려줄 수 있음.
# 웹팩 빌드
const path = require("path");
module.exports = {
name: "word-relay-setting",
mode: "development", // => 실서비스: production
devtool: "eval", //빠르게 하겠다.
resolve: {
extensions: [".js", ".jsx"],
},
entry: {
app: ["./client"],
}, //입력
module: {
rules: [
{
test: /\.jsx?/, //js, jsx파일 룰 적용 (정규표현식)
loader: "babel-loader", // 바벨을 적용하겠다.
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-proposal-class-properties"],
}, // option적용!
},
],
}, // entry에 있는 파일을 읽어서 모듈 적용후 output으로 넘김.
output: {
path: path.join(__dirname, "dist"), // path.join은 현재 폴더에서 경로 설정
filename: "app.js",
}, //출력
};
//여러개 파일을 합쳐서 app.js 한개만 쓰게 하려고 한것.
//clinet.jsx에서 WordRelay.jsx를 불러오기 때문에 따로 넣을 필요는 없다. (resolve가 있으면 확장자도 안넣어도 된다.)
*webpack은 명령어 등록이 필요하다. package.json 파일 바꾸기
//package.json
"scripts": {
"dev": "webpack"
},
npx webpack 혹은 npm run dev
로 빌드하면 dist폴더 안에 app.js가 생긴것을 확인할 수 있다.
참고 링크
youtube.com/watch?v=66_D4RYpFqY&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=13
'Web > React' 카테고리의 다른 글
| React | button에서 onClick 이벤트 핸들링 (0) | 2020.08.11 |
|---|---|
| React | number count 기능 구현하기 , onScroll 스크롤에 따라 animation 실행 (0) | 2020.08.03 |
| React : Hooks 사용. (Class와의 차이점) useState, useEffect (0) | 2020.07.28 |
| React : 구구단 예시 (State, setState) (0) | 2020.07.27 |
| React : JSX란 무엇인가? (0) | 2020.07.27 |
