Laravel Vite question...

Is it possible to do this type of thing in Laravel Vite (or just Vite)? I have a project that uses WebPack to build several sub-project front ends with separate js files. Wondering if there is a way to use Vite but have the js broken out to separate files / bundled specifically.

Project's webpack.mix.js file:

mix
    .js('resources/js/app1/app1.js', 'public/js')
    .js('resources/js/app2/app2.js', 'public/js')
    .js('resources/js/app3/app3.js', 'public/js')

The result of this is npm run watch builds all the files to public/js/app1.js, public/js/app2.js, and public/js/app3.js. How can I accomplish something similar with Vite?

Brandon Eichhorn

4 years ago

Level 4

Vite isn't a bundler, its more of a pre-configured build environment using the Rollup bundler.

Rollup did introduce code splitting, you can internalize this by adding the selected inputs and outputs to your vite.config.js:

  input: {
    index: 'resources/js/app1/app1.js',
    second: 'resources/js/app2/app2.js',
    third: 'resources/js/app3/app3.js',
    fourth: 'resources/js/app4/app4.js',
  },
  output: [
    {
      dir: 'esm',
      format: 'esm',
    },
    {
      dir: 'esm',
      format: 'esm',
    },

Have a look at this article for a more detailed explaination: https://www.infoq.com/news/2019/03/rollup-code-splitting/

fylzero

4 years ago

Level 67

@Brandon Eichhorn This doesn't seem to work. Even when trying with the rollupOptions syntax for vite.config.js

Please or to participate in this conversation.