Working Svelte Laravel Mix Extension Config

package.json

{
  "name": "svelte-mix",
  "version": "1.0.0",
  "description": "Svelte mix",
  "main": "index.js",
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "keywords": [],
  "author": "Colin Kiama",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^7.0.2",
    "laravel-mix": "^5.0.9",
    "mini-css-extract-plugin": "^1.3.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.29.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "svelte": "^3.29.7",
    "svelte-loader": "^2.13.6"
  }
}

webpack.mix.js

let mix = require('laravel-mix');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

/*
 |--------------------------------------------------------------------------
 | 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.extend(
  'svelte',
  new class {
    dependencies() { }

    webpackRules() {
      return [
        {
          test: /\.(html|svelte)$/,
          exclude: /node_modules/,
          use: {
            loader: 'svelte-loader',
            options: {
              hotReload: true
            }
          }
        },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        }
      ];
    }

    webpackPlugins() {
      return new MiniCssExtractPlugin({ filename: 'styles.css' });
    }

    webpackConfig(webpackConfig) {
      webpackConfig.resolve.alias.svelte = path.resolve('node_modules'
        , 'svelte');
      webpackConfig.resolve.extensions.push('.mjs', '.js'
        , '.svelte');
      webpackConfig.resolve.mainFields = [...'svelte', 'browser', 'module'
        , 'main'];
    }
  }()
);

mix.svelte()
  .js('src/App.js', 'static/js');