All file outputs in the same directery, it's really OK?

ListenV commented 1 year ago

Summary

All file outputs in the same directery, like this:

Building popup.html, home.html (1/2)
vite v4.2.1 building for production...
✓ 2701 modules transformed.
../extension/dist/popup.html    0.45 kB
../extension/dist/home.html     0.52 kB
../extension/dist/home.css      0.10 kB │ gzip:   0.10 kB
../extension/dist/__uno.css    22.45 kB │ gzip:   5.41 kB
../extension/dist/popup.js      6.53 kB │ gzip:   2.40 kB
../extension/dist/__uno.js    102.19 kB │ gzip:  38.78 kB
../extension/dist/home.js     397.11 kB │ gzip: 121.70 kB
✓ built in 11.42s

Reproduction

My vite.config.ts:

/// <reference types="vitest" />

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import webExtension from 'vite-plugin-web-extension'
import { r } from './scripts/utils'

export default defineConfig(({ mode }) => {
  const isDev = mode !== 'production'
  return {
    root: r('src'),
    publicDir: r('public'),
    resolve: {
      alias: {
        '@': `${r('src')}/`,
      },
    },
    plugins: [Vue(), UnoCSS(),
      webExtension({
        manifest: async () => await getManifest(isDev),
        browser: process.env.TARGET || 'chrome',
        additionalInputs: ['home.html'],
      }),
    ],
    build: {
      outDir: r('extension/dist'),
      emptyOutDir: true,
      assetsDir: 'assets',
      sourcemap: isDev ? 'inline' : false,
    },
    test: {
      globals: true,
      environment: 'jsdom',
    },
  }
})

Environment

  System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 3.66 GB / 15.42 GB
  Binaries:
    Node: 18.15.0 - D:\Development\Scoop\apps\nodejs-lts\current\node.EXE
    npm: 9.5.0 - D:\Development\Scoop\apps\nodejs-lts\current\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1413.0), Chromium (111.0.1661.54)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vite: ^4.2.1 => 4.2.1
    vite-plugin-web-extension: ^3.0.2 => 3.0.2

aklinker1 commented 1 year ago

Yes, this is OK. I have never seen any filename conflicts nor has anyone reported them.

When building only HTML files, like what you're doing here, the plugin does a standard build as described by Vite's multi-page app documentation. So the output you're seeing is what Vite normally outputs for multiple HTML files, with code splitting enabled.

You can also control the output folder structure a little bit by changing your source code's folder structure.

ListenV commented 1 year ago

OK, I have solved this problem.

my vite.config.ts:

build: {
  rollupOptions: {
    output: {
      chunkFileNames: 'assets/[name].js',
      entryFileNames: ({ name }) => {
        if (name === 'service_worker')
          return '[name].js'
        else
          return 'assets/[name].js'
      },
      assetFileNames: 'assets/[name][extname]',
    },
  },
},

and output:

.
├── home.html
├── manifest.json
├── popup.html
├── redirect.html
├── service_worker.js
└── assets
    ├── home.css
    ├── home.js
    ├── ListItem.js
    ├── popup.js
    └── icon
        ├── favicon.ico
        ├── icon-128.png
        ├── icon-16.png
        ├── icon-32.png
        ├── icon-48.png
        └── icon.png

aklinker1 / vite-plugin-web-extension