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

let mix = require("laravel-mix");
let tailwind = require("tailwindcss");
require("laravel-mix-purgecss");

mix
  .js("resources/js/app.js", "public/js")
  .postCss("resources/css/animate.css", "public/css")
  .postCss("resources/css/cronmon.css", "public/css", [
    tailwind("tailwind.js")
  ]);
//  .purgeCss();

let glob = require('glob-all')
let PurgecssPlugin = require('purgecss-webpack-plugin')

class TailwindExtractor {
  static extract (content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || []
  }
}

mix.postCss('resources/assets/css/main.css', 'public/css', [
  require('tailwindcss')
]).minify('public/css/main.css')

mix.copy('resources/assets/css/editor.css', 'public/css/editor.css').minify('public/css/editor.css')

mix.js('resources/assets/js/pages/auth/login.js', 'public/js/auth').minify('public/js/auth/login.js')
  .js('resources/assets/js/pages/auth/register.js', 'public/js/auth').minify('public/js/auth/register.js')
  .js('resources/assets/js/pages/errors/404.js', 'public/js/errors').minify('public/js/errors/404.js')
  .js('resources/assets/js/pages/projects/single.js', 'public/js/projects').minify('public/js/projects/single.js')
  .js('resources/assets/js/pages/teams/single.js', 'public/js/teams').minify('public/js/teams/single.js')
  .js('resources/assets/js/pages/offices/single.js', 'public/js/offices').minify('public/js/offices/single.js')
  .js('resources/assets/js/pages/users/profile.js', 'public/js/users').minify('public/js/users/profile.js')
  .js('resources/assets/js/pages/users/settings.js', 'public/js/users').minify('public/js/users/settings.js')
  .js('resources/assets/js/pages/admin/index.js', 'public/js/admin').minify('public/js/admin/index.js')
  .js('resources/assets/js/pages/home.js', 'public/js').minify('public/js/home.js')
  .extract(['vue', 'axios', 'luxon'])

// Full API
// mix.js(src, output);
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);

| Dcat Admin assets
 |--------------------------------------------------------------------------
 */

mix.copyDirectory('resources/assets/images', distPath + '/images');
mix.copyDirectory('resources/assets/fonts', distPath + '/fonts');
mix.copyDirectory('resources/assets/vendors', distPath + '/vendors');

// AdminLTE3.0
mix.sass('resources/assets/adminlte/scss/AdminLTE.scss', themeCss('adminlte/adminlte')).sourceMaps();
mix.js('resources/assets/adminlte/js/AdminLTE.js', distPath + '/adminlte/adminlte.js').sourceMaps();

// 复制第三方插件文件夹
mix.copyDirectory(dcatPath('plugins'), dcatDistPath('plugins'));
// 打包app.js
mix.js(dcatPath('js/dcat-app.js'), dcatDistPath('js/dcat-app.js')).sourceMaps();
// 打包app.scss
mix.sass(dcatPath('sass/dcat-app.scss'), themeCss('dcat/css/dcat-app')).sourceMaps();

// 打包所有 extra 里面的所有js和css
mixAssetsDir('dcat/extra/*.js', (src, dest) => mix.js(src, dest));
mixAssetsDir('dcat/extra/*.scss', (src, dest) => {
  if (theme) {
    return mix.sass(src, dest.replace('\.scss', '-'+theme+'.css'))
  }

  return mix.sass(src, dest.replace('scss', 'css'))
});

// 皮肤
// mixAssetsDir('dcat/sass/skins/*.scss', (src, dest) => {
//   if (theme) {

/*
 |--------------------------------------------------------------------------
 | 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({ externals: { jquery: "jQuery" } });

mix.setPublicPath('field/assets');

mix.js('src/js/visualmarkdown.js', 'js')
   .sass('src/sass/visualmarkdown.scss', 'css')
   .copy('node_modules/codemirror/lib/codemirror.css', 'field/assets/css');

| Custom Tweeki skin styles
 |--------------------------------------------------------------------------
 |
 | Those functions are meant to be used for custom assets. If you would like
 | to create your own skin assets create the listed files and use the npm
 | scripts to create custom assets. Custom assets have to be activated
 | from whitin the skin settings to be used by your skin installation.
 |
 | You can rename the given files as follows to have a basic setup for your
 | own skin styles and scripts:
 |
 | - ./resources/scripts/example.custom.js     => ./resources/scripts/custom.js
 | - ./resources/styles/example.custom.scss    => ./resources/styles/custom.scss
 |
 */
mix.js('resources/scripts/custom.js', 'public/custom/js')
   .sass('resources/styles/custom.scss', '../../extensions/SemanticOrganization/modules/tweeki/css')
   .options({
      processCssUrls: false
   })
   .copyDirectory('resources/fonts', '../../extensions/SemanticOrganization/modules/tweeki/fonts');

mix.browserSync({ proxy: process.env.MIX_LOCAL_PROXY_URL });

/**/

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

/*
 |--------------------------------------------------------------------------
 | 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.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .options({
     processCssUrls: false,
     postCss: [ tailwindcss('./tailwind.js') ],
   });

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.js('resources/js/app.es6', 'public/js')
    .sourceMaps(!mix.inProduction())
    .extract([
        'axios',
        'bootstrap',
        'jquery',
        'lodash',
        'popper.js',
        'vue'
    ])
    .version();

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

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

    output: {
        publicPath: path.normalize("/assets/back-office/"),
        chunkFilename: "[name].js",
    },

    watchOptions: {
        ignored: /node_modules/,
    },
})

mix.js("resources/assets/back/js/app.js", "js/app.js").version()

mix.extract([
    "jquery", "popper.js", "bootstrap",
    "axios", "vue",
])

mix.autoload({
    jquery: ["$", "window.jQuery"],
})

mix.sass("resources/assets/back/sass/app.scss", "css/app.css").version()

| 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({
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'resources/assets/js/')
    }
  }
})

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css/app.css')
  .options({
    extractVueStyles: true,
    processCssUrls: false,
    postCss: [tailwindcss('tailwind.config.js')]
  })
  .purgeCss({
    extensions: ['html', 'js', 'php', 'vue', 'scss', 'css'],
    globs: [
      path.join(__dirname, 'node_modules/easymde/dist/easymde.min.css'),
      path.join(__dirname, 'node_modules/easymde/dist/easymde.min.js')
    ]
  })

if (mix.inProduction()) {