[ VanillaJS ] webpack5 - 절대경로 설정

절대경로 설정하기

webpack에서 import 구문에서 명시된 alias를 만나면 절대경로로 변환해준다.

webpack.common.js

  plugins: [
    //...
  ],
  resolve: {
    alias: {
      "@core": path.resolve(__dirname, "./client/core/"),
      "@components": path.resolve(__dirname, "./client/components/"),
      "@containers": path.resolve(__dirname, "./client/containers/"),
      "@services": path.resolve(__dirname, "./client/services/"),
      "@stores": path.resolve(__dirname, "./client/stores/"),
      "@styles": path.resolve(__dirname, "./client/styles/"),
      "@utils": path.resolve(__dirname, "./client/utils/"),
    },
  },

jsconfig.json 파일 생성

vscode에서도 alias를 인식하기 위해서 별도로 설정을 해줘야 한다.

{
  "compilerOptions": {
    "baseUrl": "./client",
    "paths": {
      "@core": ["./core"],
      "@components": ["./components"],
      "@containers": ["./containers"],
      "@services": ["./services"],
      "@stores": ["./stores"],
      "@styles/*": ["./styles/*"],
      "@utils": ["./utils"]
    }
  },
  "exclude": ["dist", "node_modules"]
}

vscode에서 에러가 표시되면 여기를 참고하도록 하자.