Vite, Laravel, and dependencies in package.json not being bundled/served

Question

This question probably boils down to me not fully understanding how vite works, but I've read a bit of the docs and watched a few youtube videos and evidently I'm derpy because I'm not getting it.

Issue

I get 404 errors on package.json dependencies. Vite doesn't seem to be picking up the dependencies in my package.json file. When running npm run dev I get a 404 error. When I run npm run build, I search the compiled js file and find no reference to the js library I'm attempting to use.

Questions

1. How do I make vite pick up and bundle my package.json dependencies?

2. I learned about css code splitting in vite which if I understood correctly, will take a compiled css file, and only serve the relevant css, so am I correct in understanding that there would not be any need for separate css files, and all of it can just be bundled into the one file? Possibly stupid related question, but does the same capability exist for js files? Is that why I don't see a lot of references online to separate files for specific pages of an application?

3. If I have a bundle of libraries that are used on every page, those go in app.js, but what if I have custom javascript that only runs on a specific page, do I need to copy those over as individual files? Currently using the viteStaticCopy plugin to copy over separate files that only get used on one page, and I don't know if that's the right way to do it.

4. I use Laravel Livewire. Should that be included in my bundle as well?

Here's my vite.config.js file. You can see the commented out lines where I was attempting to get tippy.js to end up in the bundle.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
                'resources/js/layout.js',
                // 'tippy.js/dist/tippy.css',
                // 'tippy.js/themes/light.css',
                // 'tippy.js/dist/tippy-bundle.umd.min.js'
            ],
            refresh: true,
        }),

        viteStaticCopy({
            targets: [{
                src: 'resources/images',
                dest: 'assets', <--no matter what I do here, it seems to always end up with a weird structure
            }, {
                src: 'resources/js/auth/js-only-used-on-one-page.js',
                dest: 'assets/js/auth/js-only-used-on-one-page.js',
            }]
        })
    ],

    resolve: {
        alias: {
            '@': '/resources/js'
        }
    },

});

I'm just wondering if I'm on the right track on all this, or if I've missed some fundamental concept with Vite and I'm using it entirely incorrectly.