webpackからviteへ乗り換える
前提
もともと複数のHTMLで構成された静的Webサイトに追加で開発したので、手動でwebpackを書き、id=”root”だけ書かれたHTMLに Reactで書いたコンポーネントをレンダリングするようにしている
解決したいこと
開発サーバーの立ち上がりが遅い
build時に各HTMLファイルをdistディレクトリに含めたい
code:shell
- root
├─index.html
├─a.html
├─b.html
├─src
├─...(react)
install
yarn add vite
yarn add -D @vitejs/plugin-react
vite.config.tsを作成
touch vite.config.ts
code:vite.config.ts
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { resolve } from "path";
const PUBLIC_PATH = resolve(__dirname, "public");
export default defineConfig({
root: PUBLIC_PATH,
server: {
host: true,
port: 3000,
},
build: {
outDir: resolve(__dirname, "dist"),
emptyOutDir: true,
rollupOptions: {
// 各htmlのパスを書くことでbuild時にdistディレクトリににそれぞれのHTMLが作成される
input: {
main: resolve(PUBLIC_PATH, "/index.html"),
404: resolve(PUBLIC_PATH, "/404.html"),
albums: resolve(PUBLIC_PATH, "/albums.html"),
diary: resolve(PUBLIC_PATH, "/diary.html"),
jikosyoukai: resolve(PUBLIC_PATH, "/jikosyoukai.html"),
link: resolve(PUBLIC_PATH, "/link.html"),
},
},
},
});
tsconfigを編集
code:tsconfig.jsonn
{
"compilerOptions": {
//
"isolatedModules": true,
"useDefineForClassFields": true,
}
}
scriptsを変更
code:package.json
{
"scripts": {
"build": "yarn tsc && vite build",
"dev": "vite dev",
"preview": "vite preview --port 8080"
}
}
感想
はやい！
ほとんど設定ファイルを書くことなくしたいことができるので楽
viteに多くが隠蔽されていてカステマイズしにくそう