or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-features.mdconfiguration.mdcss-preprocessing.mdfile-operations.mdframework-integration.mdindex.mdjavascript-compilation.md
tile.json

configuration.mddocs/

Configuration and Customization

Webpack configuration, path management, and API extension capabilities. Laravel Mix provides extensive customization options for advanced webpack configuration, path handling, and extending the API with custom components.

Capabilities

Path Configuration

Configure output paths and resource locations for asset compilation.

/**
 * Set the public path for compiled assets
 * @param path - Public path for assets (e.g., 'public', 'dist', '/assets')
 * @returns Mix API instance for chaining
 */
setPublicPath(path: string): Api;

/**
 * Set the resource root path for URL rewriting
 * @param path - Resource root path for URL rewriting
 * @returns Mix API instance for chaining
 */
setResourceRoot(path: string): Api;

Usage Examples:

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

// Set custom public path
mix.setPublicPath('dist')
   .js('resources/js/app.js', 'js'); // Outputs to dist/js/app.js

// Set resource root for URL rewriting
mix.setPublicPath('public')
   .setResourceRoot('/assets')
   .sass('resources/sass/app.scss', 'css');

// For CDN deployment
mix.setPublicPath('build')
   .setResourceRoot('https://cdn.example.com/assets')
   .js('src/app.js', 'js')
   .version();

Mix Configuration Options

Override Mix's default configuration with custom options.

/**
 * Override Mix configuration options
 * @param options - Mix configuration object
 * @returns Mix API instance for chaining
 */
options(options: MixConfig): Api;

interface MixConfig {
  // Build & Environment
  production?: boolean;
  hmr?: boolean;
  https?: boolean;
  hmrOptions?: { host: string; port: string; };
  
  // Path Configuration
  publicPath?: string;
  resourceRoot?: string;
  runtimeChunkPath?: string | null;
  manifest?: string | false;
  
  // CSS Processing
  processCssUrls?: boolean;
  purifyCss?: boolean | object;
  postCss?: AcceptedPlugin[];
  autoprefixer?: false | AutoprefixerConfig;
  cssModuleIdentifier?: string;
  
  // Asset Processing
  imgLoaderOptions?: ImageLoaderOptions;
  fileLoaderDirs?: { images?: string; fonts?: string; };
  assetModules?: boolean;
  assetDirs?: { images?: string; fonts?: string; };
  
  // Build Optimization
  terser?: TerserPluginOptions;
  cssNano?: false | CssNanoConfig;
  cleanCss?: CleanCssConfig;
  legacyNodePolyfills?: boolean;
  
  // Development & UI
  clearConsole?: boolean;
  notifications?: { onSuccess?: boolean; onFailure?: boolean; };
  
  // Configuration
  webpackConfig?: webpack.Configuration;
  babelConfig?: BabelConfig;
}

interface ImageLoaderOptions {
  enabled?: boolean;
  gifsicle?: GifsicleConfig;
  mozjpeg?: MozjpegConfig;
  optipng?: OptipngConfig;
  svgo?: SvgoConfig;
}

// External configuration types
interface AutoprefixerConfig { [key: string]: any; }
interface TerserPluginOptions { [key: string]: any; }
interface CssNanoConfig { [key: string]: any; }
interface CleanCssConfig { [key: string]: any; }
interface GifsicleConfig { [key: string]: any; }
interface MozjpegConfig { [key: string]: any; }
interface OptipngConfig { [key: string]: any; }
interface SvgoConfig { [key: string]: any; }

Usage Examples:

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

// Basic configuration options
mix.js('resources/js/app.js', 'public/js')
   .options({
     processCssUrls: false,        // Disable CSS URL processing
     purifyCss: true,              // Enable CSS purification
     clearConsole: false           // Don't clear console on rebuild
   });

// Advanced configuration
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
     postCss: [
       require('tailwindcss'),
       require('autoprefixer')
     ],
     autoprefixer: {
       overrideBrowserslist: ['> 1%', 'last 2 versions']
     },
     terser: {
       terserOptions: {
         compress: {
           drop_console: true      // Remove console.log in production
         }
       }
     },
     runtimeChunkPath: 'js',       // Custom runtime chunk location
     manifest: 'assets.json'       // Custom manifest filename
   });

// PurifyCSS configuration
mix.sass('resources/sass/app.scss', 'public/css')
   .options({
     purifyCss: {
       paths: [
         path.join(__dirname, 'resources/views/**/*.blade.php'),
         path.join(__dirname, 'resources/js/**/*.vue')
       ],
       whitelist: ['btn-primary', 'alert-*']
     }
   });

Webpack Configuration Customization

Merge custom webpack configuration or override the generated config.

/**
 * Merge custom webpack configuration
 * @param config - Webpack configuration object to merge
 * @returns Mix API instance for chaining
 */
webpackConfig(config: webpack.Configuration): Api;

/**
 * Merge custom webpack configuration via callback
 * @param callback - Function receiving webpack and config, returning modified config
 * @returns Mix API instance for chaining
 */
webpackConfig(
  callback: (webpack: typeof import('webpack'), config: webpack.Configuration) => webpack.Configuration
): Api;

/**
 * Override the webpack config after it is built
 * @param callback - Function to modify the final webpack configuration
 * @returns Mix API instance for chaining
 */
override(callback: (config: webpack.Configuration) => void): Api;

Usage Examples:

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

// Merge static webpack config
mix.js('resources/js/app.js', 'public/js')
   .webpackConfig({
     resolve: {
       alias: {
         '@': path.resolve('resources/js'),
         'components': path.resolve('resources/js/components')
       }
     },
     module: {
       rules: [
         {
           test: /\.svg$/,
           use: 'svg-inline-loader'
         }
       ]
     }
   });

// Dynamic webpack config with callback
mix.js('resources/js/app.js', 'public/js')
   .webpackConfig((webpack, config) => {
     // Add custom plugin
     config.plugins.push(
       new webpack.DefinePlugin({
         '__APP_VERSION__': JSON.stringify(process.env.npm_package_version)
       })
     );

     // Modify existing configuration
     config.stats = {
       children: false,
       entrypoints: false
     };

     return config;
   });

// Override final configuration
mix.js('resources/js/app.js', 'public/js')
   .override(config => {
     // Modify optimization settings
     config.optimization.splitChunks.cacheGroups.vendor = {
       test: /[\\/]node_modules[\\/]/,
       name: 'vendors',
       chunks: 'all',
       minSize: 30000
     };

     // Add custom externals
     config.externals = {
       'jquery': 'jQuery',
       'lodash': '_'
     };
   });

Babel Configuration

Customize Babel transformation settings for JavaScript compilation.

/**
 * Override the default Babel configuration
 * @param config - Babel configuration object
 * @returns Mix API instance for chaining
 */
babelConfig(config: BabelConfig): Api;

interface BabelConfig {
  presets?: Array<string | [string, object]>;
  plugins?: Array<string | [string, object]>;
  exclude?: string | RegExp | Array<string | RegExp>;
  include?: string | RegExp | Array<string | RegExp>;
  babelrc?: boolean;
  configFile?: boolean | string;
}

Usage Examples:

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

// Custom Babel presets and plugins
mix.babelConfig({
  presets: [
    ['@babel/preset-env', {
      targets: '> 0.25%, not dead',
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-transform-runtime', {
      regenerator: true
    }]
  ]
});

// Exclude specific files from Babel processing
mix.babelConfig({
  exclude: /node_modules\/(?!(dom7|swiper)\/).*/
});

// Use external Babel config file
mix.babelConfig({
  configFile: path.resolve('.babelrc.js'),
  babelrc: false
});

API Extension

Extend the Mix API with custom components and functionality.

/**
 * Extend the mix api. This makes the component available as mix.name_here
 * @param name - Name for the new API method
 * @param component - Component implementing the functionality
 * @returns Mix API instance for chaining
 */
extend(name: string, component: Component): Api;

interface Component {
  register?(options: any): void;
  boot?(): void;
  dependencies?(): string[];
  webpackEntry?(entry: any): void;
  webpackRules?(): any[];
  webpackPlugins?(): any[];
  webpackConfig?(config: any): void;
}

Usage Examples:

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

// Simple function-based component
mix.extend('compress', {
  register(options = {}) {
    this.options = options;
  },
  
  webpackPlugins() {
    const CompressionPlugin = require('compression-webpack-plugin');
    return new CompressionPlugin(this.options);
  }
});

// Use the custom component
mix.js('resources/js/app.js', 'public/js')
   .compress({
     algorithm: 'gzip',
     test: /\.(js|css|html|svg)$/,
     threshold: 8192,
     minRatio: 0.8
   });

// Class-based component
class CustomImageOptimizer {
  constructor() {
    this.options = {};
  }

  register(options = {}) {
    this.options = {
      quality: 80,
      progressive: true,
      ...options
    };
  }

  dependencies() {
    return ['imagemin', 'imagemin-mozjpeg', 'imagemin-pngquant'];
  }

  webpackPlugins() {
    const ImageminPlugin = require('imagemin-webpack-plugin').default;
    return new ImageminPlugin(this.options);
  }
}

mix.extend('optimizeImages', new CustomImageOptimizer());

// Use the custom image optimizer
mix.js('resources/js/app.js', 'public/js')
   .optimizeImages({
     quality: 85,
     progressive: true
   });

Webpack Aliases and Autoloading

Configure module resolution aliases and global library autoloading.

/**
 * Add webpack-resolution aliases
 * @param paths - Object mapping alias names to paths
 * @returns Mix API instance for chaining
 */
alias(paths: Record<string, string | { raw: string }>): Api;

/**
 * Autoload libraries globally
 * @param libraries - Object mapping global names to module names
 * @returns Mix API instance for chaining
 */
autoload(libraries: Record<string, string | string[]>): Api;

Usage Examples:

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

// Add module aliases
mix.js('resources/js/app.js', 'public/js')
   .alias({
     '@': path.resolve('resources/js'),
     'components': path.resolve('resources/js/components'),
     'utils': path.resolve('resources/js/utilities'),
     'api': path.resolve('resources/js/api')
   });

// Now you can import using aliases:
// import Header from '@/components/Header.vue';
// import { formatDate } from 'utils/date';

// Autoload global libraries
mix.js('resources/js/app.js', 'public/js')
   .autoload({
     'jquery': ['$', 'window.jQuery', 'jQuery'],
     'lodash': '_',
     'axios': 'axios'
   });

// Libraries are now available globally without imports
// $('#element').fadeIn();
// _.map(array, fn);
// axios.get('/api/data');

Variable Replacement

Replace variables in code with other values during compilation.

/**
 * Replace variables in code with other values
 * @param definitions - Object mapping variable names to replacement values
 * @returns Mix API instance for chaining
 */
define(definitions: Record<string, CodeValue>): Api;

type CodeValue = undefined | null | string | number | bigint | boolean | (() => CodeValue);

Usage Examples:

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

// Define constants
mix.js('resources/js/app.js', 'public/js')
   .define({
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
     '__API_URL__': JSON.stringify(process.env.API_URL || 'http://localhost:8000/api'),
     '__VERSION__': JSON.stringify(require('./package.json').version),
     '__DEBUG__': process.env.NODE_ENV !== 'production'
   });

// Use in JavaScript code:
// if (__DEBUG__) {
//   console.log('Debug mode enabled');
// }
// 
// fetch(__API_URL__ + '/users')

// Dynamic values with functions
mix.define({
  '__BUILD_TIME__': () => JSON.stringify(new Date().toISOString()),
  '__GIT_COMMIT__': () => {
    return JSON.stringify(
      require('child_process')
        .execSync('git rev-parse HEAD')
        .toString()
        .trim()
    );
  }
});

Advanced Configuration Patterns

Environment-Specific Configuration

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

if (mix.inProduction()) {
  // Production-only configuration
  mix.version()
     .options({
       terser: {
         terserOptions: {
           compress: {
             drop_console: true
           }
         }
       }
     });
} else {
  // Development-only configuration
  mix.sourceMaps()
     .options({
       hmrOptions: {
         host: 'localhost',
         port: 8080
       }
     });
}

Conditional Feature Loading

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

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

// Add features based on environment or flags
if (process.env.ENABLE_BROWSERSYNC) {
  mix.browserSync('localhost:8000');
}

if (process.env.ANALYZE_BUNDLE) {
  mix.webpackConfig({
    plugins: [
      new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)()
    ]
  });
}