Vite - ビルドされた assets フォルダーの中身をファイルの種類ごとに分ける
やりたいこと
ビルドされた assets フォルダーの中にある js、css、img などのファイルを種類ごとのフォルダーに分けたいです。
変更前のディレクトリ構造：
my-app/
├─ dist/
│ ├─ assets/
| | | index.js
| | | index.cssmy-app/
├─ dist/
│ ├─ assets/
| | | index.js
| | | index.css変更後のディレクトリ構造：
my-app/
├─ dist/
│ ├─ assets/
| | |-js/
| | | index.js
| | |-css/
| | | index.cssmy-app/
├─ dist/
│ ├─ assets/
| | |-js/
| | | index.js
| | |-css/
| | | index.css方法
出力ファイル名は、Rollup が使われて、build.rollupOptionsd で設定されています：
output.assetFileNamesでアセットファイル（メディアファイルや stylesheets など）を設定します。output.chunkFileNamesで vendor chunk のファイルを設定てします。output.entryFileNamesで index.js を設定します。
javascript
export default defineConfig({
build: {
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
let extType = assetInfo.name.split('.').at(1);
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
extType = 'img';
}
return `assets/${extType}/[name]-[hash][extname]`;
},
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
},
},
},
});export default defineConfig({
build: {
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
let extType = assetInfo.name.split('.').at(1);
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
extType = 'img';
}
return `assets/${extType}/[name]-[hash][extname]`;
},
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
},
},
},
});