コフス技術ブログ

MPA構成のViteのエントリーポイントをvitePluginGlobInputで自動化

ViteにてMPAを構築する場合エントリーポイントのPATH指定を増やすことで対応が可能で、プラグインを使用すると逐一PATH指定をせずとも増やすことが出来ます。

以下は内部にfast-globを用いた@macropygia/vite-plugin-glob-inputを利用する例です。

vite.config.ts
import path from 'path'
import { defineConfig, UserConfig } from 'vite'
import vitePluginGlobInput from '@macropygia/vite-plugin-glob-input'

// root
const root = 'src'

// https://vitejs.dev/config/
const config: UserConfig = {
  plugins: [
    vitePluginGlobInput({
      patterns: [
        path.resolve(__dirname, root, '**/*.html'),
        // src/html-partialsは除く
        `!${path.resolve(__dirname, root, 'html-partials/**/*.html')}`
      ]
    }),
  ]
}

export default defineConfig(config)

基本的にはpatterns.pathにエントリーポイントとして追加したいhtmlが存在するディレクトリを指定するだけで機能します。
参考: その他のオプション

上記例ではhtml-partials/ディレクトリ配下を除く指定を行っていますが、fast-globが使われているのでこの辺りのPATH指定が柔軟に行えます。
参考: fast-globのオプション