Laravel-mix: Bootstrap Beta 4 - requiring dependencies

[geeksareforlife]

• Laravel Mix Version: 1.2.2
• Node Version (node -v): 6.11.2
• NPM Version (npm -v): 3.10.10
• OS: Debian 8

Description:

I don't think that this is an issue with Mix, more likely it is me not understanding how to use it properly!

The last Bootstrap 4 Alpha required Tether, which was a fairly simple webpack.mix.js:

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['lodash', 'jquery', 'axios', 'bootstrap', 'tether'])
    .autoload({
        tether: ['window.Tether', 'Tether'],
        jquery: ['$', 'window.jQuery', 'jQuery', 'jquery']
    })
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version();

But the Bootstrap 4 Beta now requires Popper.js (https://getbootstrap.com/docs/4.0/getting-started/webpack/), which seems to be impossible to include with standard mix commands. I have had to resort to:

let mix = require('laravel-mix');
let webpack = require('webpack');

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['lodash', 'jquery', 'axios', 'bootstrap', 'popper.js'])
    .webpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default'],
            })
        ]
    })
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version();

Which works, but bugs me :smile:

I am very new to webpack (and mix!) so this is probably not the best way to do this at all - is there a better way to achieve this that I am missing?

[rafael-franca]

It works for me:

let mix = require('laravel-mix');

mix.autoload({
    jquery: ['$', 'jQuery', 'window.jQuery'],
    tether: ['Tether', 'window.Tether'],
    'popper.js/dist/umd/popper.js': ['Popper']
  })
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css';

[geeksareforlife]

Thank you @rafael-franca I knew it would be me not understanding things - I didn't realise that you can reference files in the autoload, I was trying:

'popper.js': ['Popper']

Thanks again!