webpack, babel 절대 경로 사용하기

이전 포스트에서 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/*"]
    }
  }
}