<div id="readability-page-1" class="page"><div><pre><code> &lt;script type="text/babel"&gt;
 'use strict';
 const GuGuDan = () =&gt; {
 const [first, setFirst] = React.useState()
 return (
 &lt;div&gt;hello, Hooks&lt;/div&gt;
 )
 }
 &lt;/script&gt;
 &lt;script type="text/babel"&gt;
 ReactDOM.render(&lt;GuGuDan /&gt;, document.querySelector('#root'));
 &lt;/script&gt;</code></pre>
=&gt; 지금처럼 하나의 component를 만들려면 script가 굉장히 많이 만들어져야한다.
=&gt; 몇년전 강의라서 강의 안에서 facebook의 컴포넌트 개수가 2만개 이상이라고 표현 됐는데 지금 검색해보니
<img src="https://velog.velcdn.com/images/2taesung/post/68960c52-168c-49f8-b363-719868f5fc5d/image.png">
2022/12/25 기준으로 5만개 이상의 컴포넌트가 존재한다고 한다.
이 수많은 컴포넌트들을 위해 script가 존재하면 유지보수 및 효율성 관리가 불가능해짐...
이 안에서 똑같은 코드들(중복) 역시 반복됨.
이것들을 하나의 js 파일로 합쳐주는게 바로 webpack
======== 
아래의 작업은 CRA를 할 경우 볼 수 없는 코드들이다. 
(뒤져보면 어딘가에 있겠지만)
아무튼, 
webpack 실습을 시작해보자
<pre><code>npm init</code></pre>
<pre><code>npm i -D webpack webpack-cli</code></pre>
=&gt; -D는 개발할때만 쓰겠다. 
=&gt; 실제 서비스에서는 webpack이 필요없다.
index.html
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;끝말잇기&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="root"&gt;&lt;/div&gt;
 &lt;script src="./dist/app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
package.json
<pre><code>{
 "name": "webpack",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "dev": "webpack"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
 "react": "^18.2.0",
 "react-dom": "^18.2.0"
 },
 "devDependencies": {
 "webpack": "^5.75.0",
 "webpack-cli": "^5.0.1"
 }
}</code></pre>
=&gt; 팁으로 
내부에 명령을 찾을 수 없습니다. 
에러를 해결하는 방법으로 
1. 전체 컴퓨터 설정(shell script) 작성하는 것 
2. 위의 코드 처럼 scripts에 명령어를 작성해주는 것
<pre><code>"scripts": {
 "dev": "webpack"
 },</code></pre>
<ol start="3">
<li>그리고 마법의 단어 npx 
npx webpack 하면 명령어 먹음</li>
</ol>
webpack.config.js
<pre><code>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',
 } // 출력
}</code></pre>
=&gt; entry가 묶어줄 파일들을 작성해주는 것 
jsx, js 파일을 타입까지 써주긴 하는데 추후 html 등등 많아질 예정이니 위에 resolve&gt;extensions 로 파일 형식을 나열해 처리해준다.
=&gt; output은 dist 폴더에 app.js 파일로 모아서 만들어줌 그걸 index.html에서 사용한다. 
=&gt; 여기에 사용된 path는 node 에 함께 있는 pakage로 node.js 백엔드를 구성할때도 파일 형식이나 위치를 이용할때 많이 사용되는 패키지임.
그러면 이제 이런 에러가 뜰텐데
<img src="https://velog.velcdn.com/images/2taesung/post/0eb5e709-222c-4703-aa53-40a020c66949/image.png">
client.jsx
<pre><code>const React = require('react');
const ReactDom = require('react-dom');

const WordRelay = require('./WordRelay');

ReactDom.render(&lt;WordRelay /&gt;, document.querySelector('#root'))</code></pre>
=&gt; 이 에러는 jsx 파일에서 &lt; 태그 형식의 코드를 이해 못해서 발생하는 에러임.
=&gt; 이걸 해결해주는게 babel이고 이제 babel을 설정하러 갈 것.
<pre><code>npm i -D @babel/core @babel/preset-env babel-loader @babel/preset-react</code></pre>
<pre><code>{
 "name": "webpack",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "dev": "webpack"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
 "react": "^18.2.0",
 "react-dom": "^18.2.0"
 },
 "devDependencies": {
 "@babel/core": "^7.20.7",
 "@babel/preset-env": "^7.20.2",
 "@babel/preset-react": "^7.18.6",
 "babel-loader": "^9.1.0",
 "webpack": "^5.75.0",
 "webpack-cli": "^5.0.1"
 }
}</code></pre>
@babel/core 
=&gt; babel의 기본적인거 들어있는것
@babel/preset-env 
=&gt; 최신 문법을 옛날 문법만을 지원하는 환경에서도 적용가능하게끔 바꿔주는 것
그래서 옵션을 상세히 추가할수도 있음
<pre><code>module: {
 rules: [{
 test: /\.jsx?/,
 loader: 'babel-loader',
 options: {
 presets: [
 ['@babel/preset-env', {
 		targets: {
 	browsers: ['&gt; 5% in KR', 'last 2 chrome versions'],
 }
 	}
 ], '@babel/preset-react'],
 },
 }],
 },</code></pre>
<ul>
<li>브라우저 종류들 
<a href="https://github.com/browserslist/browserslist#queries">https://github.com/browserslist/browserslist#queries</a></li>
</ul>
'&gt; 5% in KR' 
=&gt; 한국에서 5%이상 점유 브라우저에서 적용
@babel/preset-react
babel-loader 
=&gt; babel이랑 webpack을 연결
이제 webpack.config.js 에서 entry와 output을 연결해주는 babel의 module을 추가해줌
=&gt; options는 babel-loader의 옵션
<pre><code>const path = require('path');

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

 entry: {
 app: ['./client'],
 }, // 입력

 module: {
 rules: [{
 test: /\.jsx?/,
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react'],
 },
 }],
 },

 plugin: [],

 output: {
 path: path.join(__dirname, 'dist'),
 filename: 'app.js',
 } // 출력
}</code></pre>
=&gt; plugin 은 기타 추가되는 애들인데 
=&gt; 실무 코드를 보면 10개 넘게 있기도 하다 
=&gt; 각각 공부해보는 방법은 하나씩 빼보고 무슨 문제가 발생하는지 체크하는 것. 
=&gt; ㅋㅋ ;; 어쩔수 없음 rules도 역시.</div></div>

2taesung.log

Taesung Lee

webpack, babel 설치 및 설정

댓글