viteでCSSとJSのみをビルドする

viteでfrontend-baseのwebpackのような形でCSSとTSのみをbuildしたいと思ったので結構無理やり感あるのですが以下で対応してみました。

基本的にViteはindex.htmlがないとBuild出来ない

• vite Configの設定

  • viteは、vite.config.jsファイルでビルド設定を管理します。

  • 以下のコードをvite.config.jsファイルに追加することで、CSSとTSのみをビルド対象に指定できます。

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: "src/assets/ts/main.ts",
        style: "src/assets/css/style.css",
      },
    },
  },
};

Instalation

npm i
# or
bun i

watch

以下のコマンドを実行すると1階層上のcommon/assetsで出力されます。 ターミナルでもわかる通りwebpackよりも高速でbuildされるのが確認できます。

npm run watch
# or
bun run watch

Image

画像周りは監視対象には入れてないですがviteがデフォルトの機能としてpublicフォルダに入れると出力されるのでそちらを使用しております。

パス：public/assets/images/sample.jpg

参考コード

リポジトリはこちらです。