webpack5 경로(별칭) 설정하기

//webpack.config.js

module.exports = {
//...

  resolve: {
    // 편의를 위해 생략할 확장자
    extensions: [".js", ".json"],

    // 모듈 불러오는 경로의 별칭 설정
    alias: {
        '~': `${__dirname}/src`,
        '@': `${__dirname}/src`,
    },

//...
}

웹팩으로 프로젝트 작업 전, 웹팩 설정에서 resolve의 alias에 원하는 별칭을 설정해두면 import/export할 때마다 조금 더 단축(?)시켜 사용가능하기 때문에 생각보다 편하다

원하는 확장자를 extensions에 넣으면 확장자 명시 없이도 웹팩이 자동으로 확인하기 때문에 편리하다.

.js, .vue같은 것들을 넣으면 좋다 :D