Setup external libraries with laravel mix

Question

I need to use an external library on web pack with laravel-mix. On web pack I should do something like this as described in the webpack docs

{
    output: {
        // export itself to a global var
        libraryTarget: "var",
        // name of the global var: "Foo"
        library: "Foo"
    },
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

But I can do this with laravel mix?

Answer 1

On your webpack.mix.js file

Just below

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

Add the following code

mix.webpackConfig({
    externals: {
        "jquery": "jQuery"
    }
});

Add any other external as required. For example I decided to load external React and ReactDOM so my config is

mix.webpackConfig({
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
});

Note that you can override any webpack default config inside mix.webpackConfig parameter object just like we did externals here