How to use the laravel-mix.webpackConfig function in laravel-mix

mix.setPublicPath(path.normalize("public/assets/front-office"))
mix.setResourceRoot("./../")

if (mix.inProduction()) {
    mix.options({
        // purifyCss: true,
        uglify: {
            uglifyOptions: {
                compress: {
                    drop_console: true,
                },
            },
        },
    })
} else {
    mix.webpackConfig({ devtool: "inline-source-map" }).sourceMaps()
}

function resolve(dir) {
    return path.join(__dirname, dir)
}

mix.webpackConfig({
    resolve: {
        alias: {
            "@": resolve("resources/assets/front/js"),
            "vue$": "vue/dist/vue.js",
        },
    },

    output: {
        publicPath: path.normalize("/assets/front-office/"),

let mix = require('laravel-mix').webpackConfig({
    resolve: {
        symlinks: false,
    },
    watchOptions: {
        ignored: [ /node_modules([\\]+|\/)+(?!remp)/ ]
    }
}).version();

if (process.env.REMP_TARGET === 'lib') {
    // we're not using mix.extract() due to issues with splitting of banner.js + vue.js; basically we need not to have manifest.js
    mix
        .options({
            publicPath: "public/assets/lib/",
            resourceRoot: "/assets/lib/"
        })
        .js("resources/assets/js/banner.js", "js/banner.js")

mix.setPublicPath(path.normalize("public/assets/back-office"))
mix.setResourceRoot("./../")

if (mix.inProduction()) {
    mix.options({
        // purifyCss: true,
        uglify: {
            uglifyOptions: {
                compress: {
                    drop_console: true,
                },
            },
        },
    })
} else {
    mix.webpackConfig({ devtool: "inline-source-map" }).sourceMaps()
}

function resolve(dir) {
    return path.join(__dirname, dir)
}

mix.webpackConfig({
    resolve: {
        alias: {
            "@": resolve("resources/assets/back/js"),
            "vue$": "vue/dist/vue.js",
        },
    },

    output: {
        publicPath: path.normalize("/assets/back-office/"),

/* global require, process */
const mix = require('laravel-mix');
const { unlinkSync } = require('fs');

mix
    .webpackConfig({
        output: {
            library: 'inactivejs',
            libraryTarget: 'umd',
        },
    })
    .js('src/index.js', 'dist')
    .sourceMaps(false)
    .then(() => unlinkSync('mix-manifest.json'));

if (process.argv.findIndex(arg => arg === 'disable-notifications') !== -1) {
    mix.disableNotifications();
}

register(configPath = './../public/resources/svg') {
        this.configPath = configPath;
        let absPath = process.cwd() + '/' + this.configPath;
        mix.webpackConfig({
            resolve: {
                alias: {
                    'SVGPATH': path.resolve(__dirname, absPath)
                }
            }
        })
    }

output: {
    path: path.resolve(public),
    filename: 'index.js',
    library: 'VdtnetTable',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  devServer: {
    overlay: true,
    inline: true,
    quiet: false
  },
  devtool: 'cheap-source-map'
};

mix.webpackConfig(config).sourceMaps();

if (mix.inProduction()) {
  mix.js(`src/index.js`, `${ public }`);
  mix.version();
  mix.disableNotifications();
} else {
  const exampleName = process.env.EXAMPLE || 'app'

  mix.js(`example/${exampleName}.js`, `${ public }`);
  mix.browserSync({
    proxy: false,
    port: 3000,
    files: [
      'src/*',
      'example/*'
    ],

let mix = require("laravel-mix");
let publicPath = "www/assets/vendor/";

mix
    .webpackConfig({
        resolve: {
            symlinks: false,
        },
        watchOptions: {
            ignored: [ /node_modules([\\]+|\/)+(?!remp)/ ]
        }
    })
    .options({
        publicPath: publicPath,
        resourceRoot: "/assets/vendor/"
    })
    .js("resources/js/app.js", "js/app.js")
    .sass("resources/sass/vendor.scss", "css/vendor.css")
    .sass("resources/sass/app.scss", "css/app.css")
    .extract()

let mix = require('laravel-mix').webpackConfig({
    resolve: {
        symlinks: false,
    },
    watchOptions: {
        ignored: [ /node_modules([\\]+|\/)+(?!remp)/ ]
    }
}).version();

mix
    .options({
        publicPath: "public/assets/vendor/",
        resourceRoot: "/assets/vendor/"
    })
    .js("resources/assets/js/app.js", "js/app.js")
    .sass("resources/assets/sass/vendor.scss", "css/vendor.css")
    .sass("resources/assets/sass/app.scss", "css/app.css")

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig(require('./webpack.config'));

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/home.scss', 'public/css');

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix.webpackConfig({
        output: {
            library: 'swipyjs',
            libraryTarget: 'umd',
            umdNamedDefine: true
        }
    })
    .options({
        uglify: {
            uglifyOptions: {
                mangle: {
                    keep_fnames: true,
                }
            }
        }
    })
    .js('src/swipy.js', 'dist/');