Vue CLI / Webpack : 설정 방법 (vue.config.js)

JooSehyun·2025년 1월 6일
vuecliwebpack
0

[Study]

목록 보기
53/59
post-thumbnail

🕵️ Vue/Cli 를 사용하여 vue.config.js 세팅을 하게되어 속성의 기능과 옵션을 숙지하기 위해 글을 쓰게 되었다. 주로 쓰는 속성을 업로드하고 추후 추가적인 기능이나 시간이 난다면 속성을 더 업데이트 할 예정이다.

📄기본 vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true
})

publicPath

  • Type : string
  • Default : '/'
module.exports = defineConfig({
	...
	publicPath: '/my-app/', // default '/'
	...
})

Vue CLI 프로젝트에서 애플리케이션이 배포될 기본 경로를 설정하는 데 사용된다. 이 속성은 애플리케이션의 모든 정적 자원에 대한 기본 URL을 지정한다. 기본적으로 /로 설정되어 있지만, 애플리케이션이 서브 디렉토리에 배포될 경우 이 값을 변경해야 한다.

ex ) https://example.com/my-app/에 배포될 경우 publicPath를 /my-app/으로 설정해야 한다.

transpileDependencies

  • Type : boolean | Array<string | RegExp>
  • Default : false

특정 종속성을 Babel을 사용하여 트랜스파일링하도록 지정하는 데 사용된다.
이는 주로 ES6+ 코드를 포함하는 외부 라이브러리나 모듈을 호환성 문제 없이 사용하기 위해 필요하다. 기본적으로 node_modules 폴더 내의 파일들은 Babel의 트랜스파일링 대상에서 제외되지만, transpileDependencies에 명시된 종속성은 예외로 처리된다.

위 📄기본 vue.config.js 에서는 true로만 되어있는데 저 상태는 transpileDependencies옵션이 활성화 되었음을 나타내고 실제로 사용할 때 배열로 명시한다.

module.exports = defineConfig({
  ...
  transpileDependencies: [
    'some-dependency',
    'another-dependency'
  ],
  ...
})

devServer

  • Type : Object
module.exports = defineConfig({
	...
	devServer: {
		...
	}
	...
})

devServer.hot / HMR(Hot Module Replacement)

Webpack HMR문서

hot 설정

Hot Module Replacement(또는 HMR)는 webpack에서 제공하는 가장 유용한 기능 중 하나이다.
모든 종류의 모듈을 전체 새로 고침 없이 런타임에 업데이트할 수 있다.

devServer: {
      ...
+     hot: true,
	  ...
    },

Vue CLI에서의 진입점

Vue CLI 프로젝트에서는 기본적으로 src/main.js 또는 main.ts 파일이 진입점으로 설정된다. Vue CLI는 내부적으로 Webpack을 사용하여 이 파일을 진입점으로 설정하고 번들링한다.

수동으로 진입점을 설정하려면 직접 경로를 설정해도 된다.

entry: {
       app: './src/index.js',
    },

🕵️ HMR의 기능

맨처음에 그냥 true , false 로만 설정을 하니 직접 어떤기능인지 정확하게 와닿지가 않았다.

기존 프로젝트에서 true , false 로 실행한 결과

true 일 때 해당 코드의 관련된 부분만 바로 업데이트만 되었고

false 일 때는 새로고침이 되었다.

devServer.proxy

  • Type : string | Object

프론트엔드 앱과 백엔드 API 서버가 동일한 호스트에서 실행되지 않는 경우 개발 중에 API 요청을 API 서버로 프록시해야 하고 devServer.proxy의 옵션을 통해 구성할 수 있다.

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

이렇게 하면 개발 서버는 알 수 없는 요청(정적 파일과 일치하지 않는 요청)을 프록시로 처리하게 된다.

⚠️ 설정이 위와 같이 문자열로 설정된 경우에 발생할 수 있다. 문자열로 설정된 경우, Webpack Dev Server는 XHR(XMLHttpRequest) 요청만 프록시한다. 즉, 브라우저에서 직접 API URL을 열려고 하면 프록시가 작동하지 않을 수 있다. 대신 Postman과 같은 API 도구를 사용하여 API 요청을 테스트해야 한다.

🕵️ CORS에러가 뜨거나 작동하지 않을 경우 path: options 쌍이 있는 객체를 사용할 수도 있다. 

module.exports = {
  devServer: {
    proxy: {
      '/api/foo': {
        target: 'https://example_foo.com',
        changeOrigin: true
      },
      '/api/bar': {
        target: 'https://example_bar.com',
        changeOrigin: true
      },
      ...
    }
  }
}

changeOrigin속성을 사용하면 브라우저에서도 정상적으로 프록시가 작동한다. 프록시 요청의 Host 헤더를 대상 서버의 호스트로 변경하여 CORS 문제를 해결하는 데 도움이 된다.

예를 들어 getFooList라는 함수로 데이터를 갖고오는 예시이다.

export const getFooList = () => {
	return axios.get('/api/foo/list')
};

proxy의 키값인 '/api/foo'로 시작하므로 /api/foo경로로 들어오는 요청은 target인 https://example_foo.com 로 프록시된다. 두번째 /api/bar 도 마찬가지

CSS Modules

CSS 모듈은 CSS 파일을 로컬 스코프로 제한하여 클래스 이름 충돌을 방지하는 기술이다.
이를 통해 각 컴포넌트의 스타일이 고유하게 유지되며, 전역 네임스페이스 오염을 방지할 수 있다.

주요 특징

  1. 로컬 스코프: CSS 클래스가 로컬 스코프로 제한된다.
  2. 자동 네임스페이스: 클래스 이름이 고유하게 변환되어 전역 네임스페이스 충돌을 방지한다.
  3. 모듈화: 각 컴포넌트의 스타일을 독립적으로 관리할 수 있다.

기본적으로 간단하게 scoped 를 사용해도 되지만 해당 하위 컴포넌트는 독립적이지 않으므로 같은 클래스를 쓴다면 적용이 된다.

CSS Modules 사용

1. Vue 컴포넌트에서 CSS 모듈 바로 사용 <style module> 태그 사용

<template>
  <button :class="$style.button">Click me</button>
</template>

<style module>
.button {
  background-color: blue;
  color: white;
}
</style>

2. CSS 모듈을 import 해서 사용

<template>
  <button :class="styles.button">Click me</button>
</template>

<script>
import styles from '@/styles/foo.module.css';
export default {
  computed: {
    styles() {
      return styles;
    }
  }
}
</script>

.module 파일 이름을 추가하고 모든 스타일 파일을 CSS 모듈로 처리하려면 아래와 같이 vue.config.js 설정을 한다.

module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

3. Vue Cli 설정 사용

module.exports = {
  ...
  css: {
    loaderOptions: {
      css: {
        modules: {
		  localIdentName: '[name]-[hash]',
        }
      }
    }
  },
  ...
}

localIdentName이 [name]-[hash]로 설정된 경우, 생성된 button클래스 이름은 다음과 같이 변환된다

  • 원본 파일 이름: styles
  • 해시 값: 예를 들어 abc123

따라서, 최종 클래스 이름은 styles-abc123가 된다.

이 설정을 통해 .button 클래스는 styles-abc123와 같이 고유한 이름으로 변환된다. 이를 통해 클래스 이름 충돌을 방지하고, 스타일을 모듈화하여 관리할 수 있다.

쉽게 말해 .button 이지만 유니크한 값으로 변환해서 고유하게 쓸 수 있게 해주는 기능이다.

CSS Modules SASS / 전처리기

loaderOptions의 sass 옵션은 SASS 전처리기와 관련된 설정이다. 이 설정은 SASS 파일을 처리할 때 추가적인 데이터를 자동으로 포함시키는 데 사용된다.

예를 들어, 모든 Sass/Less 스타일에 공유된 전역 변수를 전달하려면 다음과 같다.

📄variables.scss

/*== color ==*/
$white : #FFFFFF;
$black : #000000;
$red : #F00F00;
$grayEBE : #EBEBEB;
module.exports = {
  ...
  css: {
	loaderOptions: {
	  sass: {
	    additionalData: '@import "@/assets/scss/_variables";',
	  },
	},
  },
  ...
}

이렇게 전처리기로 가져와서 프로젝트 내의 모든 SASS 파일에서 공통 변수를 사용할 수 있도록 설정한다.

chainWebpack

Vue CLI에서 Webpack 설정을 체인 방식으로 수정할 수 있는 메서드다. 이를 통해 Webpack 설정을 세밀하게 조정할 수 있다. chainWebpack 메서드는 webpack-chain 라이브러리를 사용하여 Webpack 설정을 구성한다.

📣 webpack-chain 라이브러리는 VueCli에 내장되어 있다.

내가 사용하면서 주로 쓰던 기능은 아래와 같다

  1. Alias 설정: 모듈 경로를 더 간단하게 참조할 수 있도록 별칭을 설정한다.
  2. Loader 설정: 특정 파일 유형에 대한 로더를 설정하거나 수정한다.
  3. Plugin 설정: Webpack 플러그인을 추가하거나 수정한다.

Alias 설정

config.resolve.alias.set('@', path.resolve(__dirname, 'src/'));

src를 기점으로 절대경로로 쓰기 위해 설정하여 더 간단하게 참조할 수 있다.

import MyComponent from '@/components/MyComponent.vue';

vue-loader 설정

config.module
  .rule('vue')
  .use('vue-loader')
  .tap((options) => ({
    ...options,
    defineModel: true,
  }));

defineModel은 vue3.3에서 추가된 기능이다. 사용하려면 vue.config 나 vite.config 에서 설정을 해줘야한다.

  • vue-loader의 옵션을 수정하여 defineModel: true를 추가한다.
  • tap 메서드를 사용하여 기존 옵션을 확장하거나 수정할 수 있다.

DefinePlugin 설정

config.plugin('define').tap((definitions) => {
  Object.assign(definitions[0], {
    __VUE_OPTIONS_API__: 'true', // Vue Options API 사용 여부 설정
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false' // Vue 3의 hydration mismatch 세부 정보 비활성화
  });
  return definitions;
});

이 코드는 Webpack의 DefinePlugin을 사용하여 전역 상수를 정의하는 설정이다. DefinePlugin은 컴파일 타임에 전역 상수를 정의하여 코드 내에서 사용할 수 있게 한다. 이 설정은 Vue CLI 프로젝트에서 특정 전역 상수를 정의하여 Vue의 동작을 제어하는 데 사용된다.

profile
JooSehyun
이전 포스트

벨로그 깃허브 연동

다음 포스트

Python : 디버깅하는 방법

0개의 댓글