프로그래밍/webpack

🎯 웹팩 단축 별명으로 절대 경로 설정하기 :: alias 파일들을 import 할 때 "./../../../assets/icon..." 이렇게 경로가 길어지는 것을 별칭으로 줄여줄 수 있다. 📝 웹팩 설정 :: alias resolve: { alias: { "@": path.resolve(__dirname, "src"), // "별칭": path.resolve(__dirname, "설정할 경로"), }, }, 특정 모듈을 더욱 쉽게 import 또는 require 하기 위해 alias를 생성 "별칭": path.resolve(__dirname, "설정할 경로") 이렇게 작성해주면 된다. // 변경 전 import DefaultFarm from "./../../../assets/icon/farmPictu..

🎯 webpack 설정 및 설명 webpack에 대해서 하나하나 알아보자. 📝 npm으로 리액트 설정하기 npm itit npm i react-dom npm i -D webpack webpack-cli npm i babel-loader @babel/core npm i -D @babel/preset-env // 알아서 환경에 맞게 바벨로 맞춰주는 거 npm i -D @babel/preset-react // jsx 쓸 수 있음 "@babel/core" - 기본, 최신 문법으로 변환 "@babel/preset-env" - 각자 컴퓨터 환경에 맞게 바꿔주는 거 "@babel/preset-react" - jsx 바꿔주는 거 "babel-loader" - 바벨이랑 웹팩 연결해주는 거 "webpack" "webpac..