본문 바로가기
Svelte

Svelte - Snowpack dev Port 조정 devOptions 사용

by 올엠 2022. 7. 26.
반응형

개발서버의 포트를 변경하기 위해서 찾아보던중 Snowpack 옵션중 devOptions을 변경해야 하는줄 알았다.

그럼 이에 대해서 알아보고자 한다. 설정을 하지 않으면 기본으로 지정된다.

module.exports = {
  devOptions: {
    port: 8080, // 개발 서버를 실행할 포트 번호
    fallback: 'index.html', // SPA인 경우 제공할 모든 사용자 경로
    open: 'default', // 새 브라우저 탭에 개발 서버를 열기, “chrome”, “firefox”, “brave”등 설치 경로 지정
    output: 'dashboard', // 콘솔의 출력 모드를 지정, "stream" | "dashbaord", 다중 실행시 stream으로 동일한 콘솔에 내용을 출력
    hostname: 'localhost', // 브라우저가 열리는 호스트 이름, 만약 특정 IP로 접속을 제한한 경우 해당 IP 입력
    hmr: true, // Hot Module Replacement(HMR, 수정사항을 즉시 반영) 활성화, 수정 내용이 있을시 화면 반영을 할 수 있음
    hmrErrorOverlay: true, // HMR 활성화시 자바스크립트 오류 표시 여부
    secure: false, // HTTP2 활성화 상태에서 HTTPS 사용 여부, SSL 인증서는 https://www.snowpack.dev/reference/configuration#devoptionssecure 참고
  }
}

필자의 경우  port 변경이 필요하여 아래와 같이 exports에 추가하였다.

module.exports = {
    mount: {
        public:'/',
        src:'/_dist_'
    },
    plugins: [
        '@snowpack/plugin-svelte',
        ['@snowpack/plugin-babel',{
            transformOptions: bableOptions()
        }],
        '@snowpack/plugin-dotenv',
        '@snowpack/plugin-optimize'
    ],
    alias: {
        '~': './src/'
    },
    devOptions: {
        port: 3000
    }
}

 

반응형