How to compile multiple mix.webpackConfig with multple folders in Laravel VueJs

Question

I've a webpack.mix.js in laravel vuejs and i want separate configurations for Admin, Subscribers and Dealers which are the folders i've created into resourse/js folder and i want to compile these folders into seperate folders in public/adminapp, public/subscriberapp, public/dealerapp how can i achieve such results? i've tried to add the multiple configs inside the webpack but couldn't make it, here is my webpack.mix.js code

mix.webpackConfig({
  output: { chunkFilename: 'adminapp/js/chunks/[name].js?id=[chunkhash]' },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': __dirname + '/resources/adminapp/js',
      '@pages': __dirname + '/resources/adminapp/js/pages',
      '@components': __dirname + '/resources/adminapp/js/components',
      '@cruds': __dirname + '/resources/adminapp/js/cruds'
    }
  }
})

// Admin App
mix
  .js('resources/adminapp/js/app.js', 'public/adminapp/js')
  .sass('resources/adminapp/sass/app.scss', 'public/adminapp/css')

// subscriber
// mix.webpackConfig({
//   output: { chunkFilename: 'subscriberapp/js/chunks/[name].js?id=[chunkhash]' },
//   resolve: {
//     extensions: ['.js', '.vue', '.json'],
//     alias: {
//       '@': __dirname + '/resources/subscriberapp/js',
//       '@pages': __dirname + '/resources/subscriberapp/js/pages',
//       '@components': __dirname + '/resources/subscriberapp/js/components',
//       '@cruds': __dirname + '/resources/subscriberapp/js/cruds'
//     }
//   }
// })

// Subscriber App
// mix
//   .js('resources/subscriberapp/js/app.js', 'public/subscriberapp/js')
//   .sass('resources/subscriberapp/sass/app.scss', 'public/subscriberapp/css')

Answer 1

You can put all your js assets in an array like this: mix.js([source assests],'destination.js').vue(); . I have added that vue() method to tell webpack that we are dealing with vue files;