새로운 블로그로 이전 작업을 진행하고 있어 포스트가 새로 작성되고 있지 않습니다.

빠른 시일 내에 새로운 블로그로 인사드리겠습니다.

새로운 블로그 : https://unho.vercel.app/

본문 바로가기
공부 및 정리/프론트엔드

webpack, babel 절대 경로 사용하기

by 언호 2022. 9. 17.

이전 포스트에서 webpack 과 babel 의 기본 개념과 함께 사용하기 위한 기본 설정 방법을 알아보았습니다.

이번에는 webpack 과 babel 을 이용하여 절대 경로를 설정하여 import 시 경로 설정 하는 방법에 대해 알아보겠습니다.


절대 경로 설정

개발을 진행하다보면 다른 파일을 불러오는 경우가 많이 발생합니다.

파일을 불러오기 위해 상대 경로로 해당 파일의 위치를 찾아가는 경우가 많습니다.

 

상대 경로를 이용하면 아래와 같은 경우가 많이 발생할 수 있습니다.

import { util } from '../../../modules/util.js';

 

위의 경우 해당 파일을 찾기에도 불편함이 있고, 불러오는 파일이 많은 경우 가독성도 떨어지게 됩니다.

그래서 특정 경로를 절대 경로로 지정하여 가독성을 높이고, 간편하게 파일을 불러올 수 있습니다.

import { util } from 'modules/util.js';

 

절대 경로를 설정하는 두 가지 방법에 대해 알아보겠습니다.

  1. babel-plugin-module-resolver 사용
  2. webpack.config.js 의 resolve 설정 추가

 

babel-plugin-module-resolver 사용

babel plugin 중 절대 경로를 설정에 대한 babe-plugin-module-resolver 을 추가하여 설정할 수 있습니다.

plugin 설정을 위해 설치부터 진행이 필요합니다.

$ npm install -D babel-plugin-module-resolver

 

webpack 을 사용하지 않고, babel 만 사용하는 경우 babel.config.json 에 설정을 추가하여 사용할 수 있습니다.

alias 속성에 절대 경로와 이에 해당하는 상대 경로를 설정해주면 됩니다.

// babel.config.json

{
  // 생략...
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "src": "./src",
          "util": "./src/util"
        }
      }
    ]
  ]
}

 

만약 webpack 과 함께 사용중이라면, webpack.config.js 에 추가하여 사용할 수 있습니다.

이전의 babel.config.json 에서 작성한 내용과 유사하게 babel-loader 내부에 추가하면 됩니다

import path from "path";

export default {
  // 생략...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: [">= 1% in KR"],
                },
              ],
            ],
            plugins: [
              [
                "module-resolver",
                {
                  "root": [path.resolve(__dirname)],
                  "alias": {
                    "src": "./src",
                    "module": "./src/module",
                  }
                }
              ]  
            ]
          },
        },
      },
    ],
  },
};

 

webpack 을 사용하지 않고, babel 만을 사용한다면 해당 플러그인을 설치하여 이용하는 것이 좋습니다.

그러나 webpack 을 함께 사용중이라면 아래의 방법을 이용한다면 플러그인을 설치하지 않고 사용할 수 있습니다.

 

webpack 이용한 방법

이전 포스트에서 작성한 webpack.config.js 에서 resolve 속성을 추가하여 손쉽게 설정이 가능합니다.

 

resolve 의 alias 에 원하는 절대 경로와 대응하는 경로를 추가해주면 됩니다.

// webpack.config.js

const path = require('path');

module.exports = {
	// 생략...
    resolve: {
    	alias: {
        	src: path.resolve(__dirname, 'src'),
            modules: path.resolve(__dirname, 'src/modules/'),
        }
    }
}

 

절대 경로 자동완성

위의 방법들 중 편한 방법으로 설정을 추가한다면, 절대 경로를 이용하여 편하게 개발을 진행 할 수 있습니다.

그러나 IDE 에서 자동 완성이 표시되지 않아 불편함이 존재합니다.

 

vsCode 를 이용하는 경우 jsonconfig.json 파일을 추가하여 설정 할 수 있습니다.

// jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths: {
      "src/*": ["./src/*"],
      "module/*": ["./src/module/*"]
    }
  }
}

댓글