webpack (유튜브 2-3 ~ 2-5)
왜 쓰냐?
여러 js파일을 한방에 합치는 기술 + babel
- Node.js => JS 실행기
- React를 할때는 Node.js를 알아야한다.
=> JS 실행기를 알아야한다.
사용법
npm init -> package.json생성
npm i react react-dom
npm i -D webpack webpack-cli -> -D는 개발용으로만 쓴다는 의미- webpack.config.js 파일 추가 후
modules.export { ... }작성
위와같은 작업을 대신해주는 것
npx create-react-app 폴더이름은 해당 위의 작업을 알아서 해준다
=> 단점으로 자동으로 만들어주어 create-react-app이 하는 일을 이해할 수 없다
jsx와 js 파일을 나누는 이유
실제 차이는 거의 없으나 파일을 볼 때 이 파일은 jsx를 갖고 있으니 React 파일이구나 하면서 인식을 할 수 있게 한다.
목표
client.jsx와 WorsRelay.js가 app.js의 하나의 파일로 처리되게 만드는 목표
결과 파일 부분
webpack.config.js
//node에서 경로를 쉽게 조작
const path = require('path');
module.exports = {
name : 'word-relay-setting',
mode : 'development', //실서비스 : production
devtool : 'eval',
resolve : {
extensions : ['.js','.jsx'] //알아서 웹팩이 js와 jsx를 찾아서 만들어준다
},
//중요
entry : {
app : ['./client'] //client.jsx에서 WordRelay.jsx가 있어서 따로 적을 필요 X
}, //입력
output:{
path : path.join(__dirname , 'dist'),
filename : 'app.js'
} //출력
};
entry와 output이 중요하다
resolve의 경우 매번 일일하 entry에 작성하는 확장자 명을 생략하게 해준다
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'))
/*
const React = require("react"); 대신에 import React from "react"; 로 사용해도 될까요?
=> 되는데 웹팩 설정 하셔야 합니다.
*/WordRelay.jsx
const React = require('react');
const {Component} = React;
class WordRelay extends Component {
state = {
}
render(){
}
}
module.exports = WordRelay;첫번째 시도
package.json
"scripts": {
"dev": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
npm run dev를 통해 webpack을 시도했으나 아래와 같다.
ReactDom.render(<WordRelay />, document.querySelector("#root")); 부분에서 문제가 발생했고
You may need an appropriate loader to handle this file type
이를 다룰 로더가 필요하다고 한다
문제점 : jsx 지원
npx webpack을 실행하니 에러가 뜬다.
(npm run dev로 scripts에 dev : webpack으로 설정한 것 과 같음)
문제점 해결하기 (babel 설치)
현재 webpack은 해당 jsx를 인식하지 못하므로 babel을 통해 최신문법을 바꿔줘야한다.
설치를 위한 명령어들
npm i -D @babel/core: babel의 기본 (최신 문법 바꿔주기)npm i -D @babel/preset-env: 각각의 브라우저에 맞게 알아서 최신문법을 처리npm i -D @babel/preset-react: jsx를 지원npm i -D babel-loader: babel과 webpack을 연결한다.
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader로 한번에도 가능하다
해당 내용이 package.json에 추가된 것을 알 수 있다.
수정할 코드들
webpack.config.js
//node에서 경로를 쉽게 조작
const path = require("path");
module.exports = {
name: "word-relay-setting",
mode: "development", //실서비스 : production
devtool: "eval",
resolve: {
extensions: [".js", ".jsx"], //알아서 웹팩이 js와 jsx를 찾아서 만들어준다
},
//중요
entry: {
app: ["./client"], //client.jsx에서 WordRelay.jsx가 있어서 따로 적을 필요 X
}, //입력
module: {
rules: [
{
test: /\.jsx?/, //js나 jsx파일에 어떤 rule을 적용한다.
loader: "babel-loader", // 옛날 브라우저에서도 호환되게
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
],
},
output: {
path: path.join(__dirname, "dist"),
filename: "app.js",
}, //출력
};중간에
module이 추가되었고 해당 부분에 추가한 options를 넣는다 (preset-env , preset-react)
- 순서대로 entry -> module -> output 순이다
다시 실행해보기
npm run dev를 통해 다시 시도했다.
정상적으로 동작하고 dist폴더안에 app.js가 만들어진 것을 알 수 있다.
결과보기
- WordRelay.jsx 를 결과를 보기위해 수정했다.
const React = require("react");
const { Component } = React;
class WordRelay extends Component {
state = {
text: "Hello, webpack",
};
render() {
return <h1>{this.state.text}</h1>;
}
}
module.exports = WordRelay;
잘 동작하는 것을 확인할 수 있다.
정리하기
webpack (다양한 js 파일 하나로 모으기)
모든 컴포넌트를 한곳에서 정의한다면 해당 코드는 확인도 힘들고 다루기도 어렵다
=> 컴포넌트를 분리해야한다
=> 파일을 분리해야한다
=> 분리한 파일들을 일일히 다 가져와서 처리하는 것은 안좋다
=> 차라리 각각의 분리한 파일들을 배포할때에는 하나의 js로 만드는 것은 어떨까?
=> webpack이 그런 역할을 해준다.
webpack의 무엇을 설치하고 설정할까?
=> webpack webpack-cli를 설치한다
=> react react-dom를 react를 쓰기위해 설치한다
=> webpack.config.js를 통해 처리할 파일을 entry에 출력할 파일을 output에 설정
=> package.json에서 scripts에 webpack을 실행하게 설정
어떤 문제가 발생할까?
=> webpack만으로는 설치한 react로 인한 react는 이해하지만jsx와 같은 것을 이해를 못해
=> 이를 이해할 수 있게 babel을 설치해야해
babel (최신 문법을 레거시 문법으로)
무엇을 설치하고 설정할까?
=> @babel/core 를 babel 기본이므로 설치
=> @babel/preset-ent를 각각의 브라우저에 맞게 최신문법을 변경
=> @babel/preset-react를 jsx 지원
=> babel-loader를 babel과 webpack을 연결
=> webpack.config.js에module을 추가하여 설치한 내용과 관련하여 추가
=>npm run dev를 통해 원하는 output 결과 파일을 생성
=> index.html에서 해당 js파일을 연결하여 결과를 완성
CRA와 webpack
CRA 또한 webpack이 존재한다.
CRA의react-script에서 숨기고 있을뿐이지
npm run eject를 이용하면config폴더가 나타나고 그곳에webpack.config.js가 존재한다.
참조링크
