Vite를 이용하여 정적 웹페이지 배포하기

vite 설치

vite 생성을 하고 framework는 빌드 파일이 js로 생성되는걸 원하지 않기 때문에 vanilla를 선택함.

package 설치 및 사용

• glob
  glob는 파일들의 리스트를 뽑을 때 사용. glob() 함수는 인자로 받은 패턴과 이름이 일치하는 모든 파일과 디렉터리의 리스트를 반환합니다. 패턴을 그냥 *라고 주면 모든 파일과 디렉터리를 가져올 수 있다

• path
  파일과 Directory 경로 작업을 위한 Utility를 제공

• sass
  css 전처리기

  css: {
    preprocessorOptions: {
      scss: {}
    }
  },

• vite-plugin-handlebars
  파일을 includes하기 위해 설치함

  build: {
  	rollupOptions: {
      input: Object.fromEntries(glob.sync('./src/**/*.html').reduce((acc, file) => {
        if (!file.includes('components')) {
          acc.push([
            path.relative('src', file.slice(0, file.length - path.extname(file).length)),
            fileURLToPath(new URL(file, import.meta.url))
          ])
        }
      return acc
    }, [])),
  },
  plugins: [
    handlebars({
      partialDirectory: [
        path.resolve(__dirname, 'src/components'),
      ],
    })
  ]

• vite-plugin-static-copy

plugins: [
    viteStaticCopy({
      targets: [
        {
          src: path.resolve(__dirname, 'src/assets/images'),
          dest: './assets'
        }
      ]
    })
  ]

현재 화면에서 실제로 사용이 되어야만 처리가 가능해서 이미지를 js로 사용하게 되면 빌드가 되지 않았고 이미지 폴더 안에 폴더를 만들 경우 기본 rollupOptions의 output 설정으로는 폴더를 지정할 수가 없어 폴더를 정리해도 설정한 이미지 폴더안에 나열되었다 그래서 단순하게 이미지 폴더를 단순 복사하기 위해 설치함

빌드 시 폴더 구성

삽질로그💦

그동안 html파일로 전달을 요구하는 퍼블리싱 작업은 gulp로 작업했는데 초기 셋팅에 비해 버전도 많이 높아졌고 사용하는 동안 별거 없는데도 gulp 자체가 무겁다 느껴져서 gulp처럼 빌드 가능한 시스템을 vite로 구축하게 되었다.
vite를 이용하니 원하는 방향에 대한 레퍼런스 찾기가 힘들어 삽질을 많이 했지만 확실히 갱신 속도가 빠르고 가벼웠다.