Cra 없이 리액트를 환경을 직접 만들어보자! 라고한지 벌써 10일이 지나버린 오늘,,,
사실 없이 만든건 저번주에 전부 해보았다. 문제는 그걸 왜 기록을 안한거야,,,, 하면서
깃허브에 커밋도하고 했어야 했는데,,,,, ㅠㅠ 여튼... 그러한 이유로 드디어 웹팩으로 해본 것을 써본다.
일단 웹팩이 뭐인지, 왜 쓰는지는 아주 간략하게 이 게시글에 적어두었다! => 게시글 링크
자 이제 시작해보자!
1. 프로젝트 폴더 생성 후 yarn init를 이용하여 package.json 만들기
yarn init을 사용하면 아래와 같이 진행된다.
yarn init
question name (testdir): my-awesome-package
question version (1.0.0):
question description: The best package you will ever find.
question entry point (index.js):
question git repository: https://github.com/yarnpkg/example-yarn-package
question author: Yarn Contributor
question license (MIT):
question private:
success Saved package.json
이렇게 나오고 아래와같이 package.json 파일이 폴더에 생성되었을 것이다.{
"name": "my-awesome-package",
"version": "1.0.0",
"description": "The best package you will ever find.",
"main": "index.js",
"repository": {
"url": "https://github.com/yarnpkg/example-yarn-package",
"type": "git"
},
"author": "Yarn Contributor",
"license": "MIT"
}2. 웹팩, 로더, 플러그인을 설치
웹팩 설치
yarn add -D webpack webpack-cli webpack-dev-server
D 명령어를 사용하는 이유는 개발환경에서만 사용하기 위해서!
webpack : 실제로 우리가 사용하는 웹팩!
webpack-cli : 웹팩을 커맨드 라인에서 사용하기 위한 것 ex) yarn start, yarn build 등등
webpack-dev-server : yarn start하면 나오는 그 dev서버를 위한것로더 설치 (로더는 웹팩이 파일을 빌드할 때 파일을 해석하기 위한 패키지)
yarn add babel-loader css-loader style-loader
babel-loader - jsx 파일과 최신 자바스크립트 문법을 변환(바벨과 연동)
css-loader - css 파일을 해석
style-loader - css를 dom에 삽입웹팩 플러그인 설치 (플러그인은 웹팩이 해석한 결과물을 처리하는 패키지)
yarn add html-webpack-plugin mini-css-extract-plugin
html-webpack-plugin - html 파일에 번들링 된 js 파일을 삽입하기위한 패키지
mini-css-extract-plugin - js 파일과 css 파일을 분리
3. 설치가 끝났다면 웹팩 설정 파일을 만들어 설정
touch webpack.config.js
을하여 웹팩 설정 파일을 만들어주자!
꼭 터미널이 아닌 그냥 파일 만들기도 당연히 가능!
나의 webpack.config.js 파일!
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //플러그인 가져온 것을 추가
module.exports = {
mode: "development", // 개발 모드 설정
//none | development | production 아무것도 설정하지 않으면 기본값으로 production이 설정된다.
//자세한건 웹팩 홈페이지로!
//https://webpack.kr/configuration/mode/
entry: "./src/index.js",// 웹팩이 모듈들을 번들링 해주기 위한 최상위 기준 파일?
output: { // 번들링 한 것들의 결과물의 파일경로
path: path.join(__dirname, "/build"), //기본옵션 dist라는 폴더명으로 나옴
filename: "index.js", // 번들링한 파일의 제목
clean: true, //이전 파일을 정리하고 번들링을 시작합니다
},
devServer: {
port: 3000, //기본으로 했을 경우는 auto => 8080으로 나옴
liveReload: true, // 서버을 실행후 파일이 수정되었을 때, 리로드 시키기
},
module: { // 웹팩이 해석하여 번들링할 때 자바스크립트 파일이 아닌 것들을 변환 할 수록 있게 도와주는 속성
rules: [
{
test: /\.(js|jsx)$/, //파일 확장자가 js, jsx 인 것들
exclude: /nodeModules/, // 번들링할때, nodeModules는 제외하기 위해서 사용
use: {
loader: "babel-loader", //바벨 로더를 사용하여 변환한다.
},
},
{
test: /\.css$/, //확장자가 css인 것들!
use: ["style-loader", "css-loader"], // 스타일 로더, css 로더 사용
},
],
},
plugins: [new HtmlWebpackPlugin({ template: "./public/index.html" })],
//내가 설치한 웹팩 플러그인 가져와서 쓰기!
};이렇게 하면 웹팩 설정완료!
4. 바벨 설정
일단 .babelrc 파일을 만든다. 그리고 아래와 같은 코드로 바벨 설정을 해주었다.
여기서 의문점은 .babelrc와 babel.config.js 차이가 과연 무엇일까,,,,?
여기가 가장 정리가 잘 되어있는 것 같은데, 아직은 정확히 이해는 하지 못했다,,,,
참고자료
{
"presets": ["@babel/preset-react", "@babel/preset-env"],
"plugins": ["@babel/plugin-transform-react-jsx"]
}5. 이제 터미널에서 yarn start 하면 실행
진행하다가 생겼던 문제
파일 확장자 명에서 오류가 났었다.
맨처음에 실행을 하니 아래와 같은 오류가 나왔었고,
이 문제는 아래가 원인이었다. 써주니 정상적으로 작동은 되는데, 나는 뒤에 확장자명을 쓰고싶지 않다...!
import ReactDOM from "react-dom/client";
import React from "react";
import App from "./App.jsx"; //이 부분에서 cra로 할때는 jsx를 써주지 않아도 되었는데, 쓰지 않을 경우 오류가 났음
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
이 오류는 웹팩 옵션에서
resolve: {
extensions: [".js", ".jsx"], // js나 jsx 파일을 임포트 해올때는, 기본적으로 추가해준다? 그런느낌!
}, 을 추가하니까 확장자명을 사용하지 않고도 정상적으로 동작했다!!
참고 : yarn 공식문서
참고 : joyfuI의 잡동사니 블로그
마무리
그래서 웹팩을 실제로 해보니,,,, 음,,,, 생각보다 난 모르는게 많았고 날로 먹었구나 생각이 들었다.
그리고 왜 굳이 CRA없이 프로젝트를 만들어 보라고 했을까? 라는 생각도 하게 되었다. 내가 생각해본 결과는 보기보다 프로젝트를 위한 최소한의 설정은 엄청 많지 않았고, 그렇기에 내가 필요한 부분만 가져다 쓴다면 프로젝트 자체도 가벼워지지 않을까 생각해본다.
