[Webpack] 웹팩 alias 단축 별명으로 절대 경로 설정하기

🎯 웹팩 단축 별명으로 절대 경로 설정하기 :: 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/farmPicture2/defaultFarm.svg"

// 변경 후
import DefaultFarm from "@/assets/icon/farmPicture2/defaultFarm.svg"

 

📌 참고

• Resolve | webpack
• CRA webpack 분석 (1) - resolve.alias 설정