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

tessl/npm-laravel-mix

Laravel Mix provides a clean, fluent API for defining webpack build steps for JavaScript and CSS compilation.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/laravel-mix@6.0.x

To install, run

npx @tessl/cli install tessl/npm-laravel-mix@6.0.0

index.mddocs/

Laravel Mix

Laravel Mix provides a clean, fluent API for defining webpack build steps for JavaScript and CSS compilation. It simplifies the webpack configuration process by offering an intuitive API for common build tasks including JavaScript bundling, CSS preprocessing, autoprefixing, minification, versioning, and hot module replacement.

Package Information

  • Package Name: laravel-mix
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install laravel-mix

Core Imports

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

For ES modules:

import mix from 'laravel-mix';

Basic Usage

Laravel Mix works by creating a webpack.mix.js configuration file in your project root:

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

// Compile JavaScript
mix.js('resources/js/app.js', 'public/js');

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

// Version assets for cache busting
mix.version();

Run with CLI commands:

# Development build
npx mix

# Production build  
npx mix --production

# Watch for changes
npx mix watch

# Hot module replacement
npx mix watch --hot

Architecture

Laravel Mix is built around several key components:

  • Fluent API: Chainable methods returning the mix instance for configuration
  • Component System: Modular components handling different asset types and build features
  • Webpack Integration: Abstracts webpack configuration while maintaining extensibility
  • Task System: Internal task queue for file operations and asset processing
  • CLI Interface: Command-line tools for development and production builds

Capabilities

JavaScript Compilation

Modern JavaScript and TypeScript compilation with Babel configuration and framework support.

// Modern JavaScript compilation
js(src: string | string[], output: string): Api;

// TypeScript compilation  
ts(src: string | string[], output: string, options?: Partial<Options>): Api;
typeScript(src: string | string[], output: string, options?: Partial<Options>): Api;

// CoffeeScript compilation
coffee(src: string | string[], output: string): Api;

JavaScript Compilation

CSS Preprocessing

CSS compilation through various preprocessors including Sass, Less, Stylus, and PostCSS.

// PostCSS compilation
css(src: string, output: string, plugins?: AcceptedPlugin[]): Api;
postCss(src: string, output: string, plugins?: AcceptedPlugin[]): Api;

// Sass/SCSS compilation
sass(src: string, output: string, pluginOptions?: object, postCssPlugins?: AcceptedPlugin[]): Api;

// Less compilation
less(src: string, output: string, pluginOptions?: object, postCssPlugins?: AcceptedPlugin[]): Api;

// Stylus compilation
stylus(src: string, output: string, pluginOptions?: object, postCssPlugins?: AcceptedPlugin[]): Api;

CSS Preprocessing

Framework Integration

Support for popular JavaScript frameworks including Vue.js, React, and Preact.

// Vue.js support (auto-detects version 2 or 3)
vue(config?: VueConfig): Api;

// React support
react(config?: ReactConfig): Api;

// Preact support
preact(): Api;

interface VueConfig {
  version?: number;
  globalStyles?: false | string | string[] | Record<string, string | string[]> | null;
  extractStyles?: boolean | string;
  useVueStyleLoader?: boolean;
  runtimeOnly?: boolean;
  options?: VueLoaderOptions;
}

interface ReactConfig {
  extractStyles?: boolean | string;
}

Framework Integration

File Operations

File copying, concatenation, and asset management utilities.

// Copy files and directories
copy(from: string | string[], to: string): Api;
copyDirectory(from: string | string[], to: string): Api;

// File concatenation and processing
combine(src: string | string[], output?: string, babel?: boolean): Api;
babel(src: string | string[], output?: string, babel?: boolean): Api;
minify(src: string | string[], output?: string, babel?: boolean): Api;
scripts(src: string | string[], output?: string, babel?: boolean): Api;
styles(src: string | string[], output?: string, babel?: boolean): Api;

File Operations

Build Features

Asset versioning, vendor extraction, source maps, and development tools.

// Asset versioning with cache busting
version(files?: string | string[]): Api;

// Vendor library extraction
extract(config: Partial<Extraction>, output?: string): Api;
extract(test: ExtractTestCallback, output?: string): Api;
extract(libs: string[], output?: string): Api;
extract(output?: string): Api;

// Source map generation
sourceMaps(generateForProduction?: boolean, devType?: string, productionType?: string): Api;

// Live reloading with BrowserSync
browserSync(config?: BrowserSyncConfig): Api;
browserSync(proxy: string): Api;

Build Features

Configuration and Customization

Webpack configuration, path management, and API extension capabilities.

// Path configuration
setPublicPath(path: string): Api;
setResourceRoot(path: string): Api;

// Mix configuration
options(options: MixConfig): Api;

// Webpack configuration
webpackConfig(config: webpack.Configuration): Api;
webpackConfig(callback: Function): Api;
override(callback: Function): Api;

// Babel configuration
babelConfig(config: BabelConfig): Api;

// API extension
extend(name: string, component: Component): Api;

Configuration and Customization

CLI Commands

Laravel Mix provides command-line tools for development and production builds:

# Build assets (default command)
mix [options]
mix build [options]

# Watch for file changes and rebuild  
mix watch [options]

# Available options:
--production, -p          # Run Mix in production mode with optimizations
--mix-config <path>       # Path to Mix configuration file (default: webpack.mix.js)
--no-progress             # Disable progress reporting during build
--hot                     # Enable hot module replacement (watch only)  
--https                   # Enable HTTPS for hot reloading server (watch only)

Command Examples:

# Development build
npx mix

# Production build with optimizations
npx mix --production

# Watch with hot reloading
npx mix watch --hot

# Watch with custom config file
npx mix watch --mix-config webpack.custom.js

# Production build with custom config and no progress
npx mix build --production --mix-config production.mix.js --no-progress

Global API Methods

Additional methods available directly on the mix API for configuration, lifecycle management, and debugging.

// Environment detection
inProduction(): boolean;

// Build lifecycle hooks
before(callback: (Mix: MixHelpers) => void | Promise<void>): Api;
after(callback: (stats: webpack.Stats) => void | Promise<void>): Api;
then(callback: (stats: webpack.Stats) => void | Promise<void>): Api;

// Conditional execution
when(condition: boolean, callback: (mix: Api) => void | Promise<void>): Api;

// Webpack aliases and autoloading
alias(paths: Record<string, string | { raw: string }>): Api;
autoload(libraries: Record<string, string | string[]>): Api;

// Variable replacement
define(definitions: Record<string, CodeValue>): Api;

// Notifications
disableNotifications(): Api;
disableSuccessNotifications(): Api;

// Debug utilities
dump(): Api;
dumpWebpackConfig(): Api;

Core Type Definitions

// Core API interface
interface Api {
  // All the methods above return this interface for chaining
}

// Helper types for global methods
interface MixHelpers {
  File: typeof File;
  paths: Paths;
  chunks: Chunks;
  dependencies: Dependencies;
}

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

// Extract types for vendor extraction
interface Extraction {
  test?: ExtractTestCallback;
  libs?: string[];
  to?: string;
}

type ExtractTestCallback = (module: webpack.Module) => boolean;

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

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

interface BabelConfig {
  presets?: Array<string | [string, any]>;
  plugins?: Array<string | [string, any]>;
  [key: string]: any;
}

interface BrowserSyncConfig {
  proxy?: string;
  server?: string | boolean | { baseDir: string; };
  files?: string[];
  [key: string]: any;
}

// PostCSS plugin type
type AcceptedPlugin = any;

// External library configuration types (referenced but defined by their respective packages)
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; }
interface VueLoaderOptions { [key: string]: any; }

// Component interface for extending Mix
interface Component {
  register?(...args: any[]): void;
  boot?(): void;
  dependencies?(): string | string[];
  webpackEntry?(entry: webpack.EntryObject): void;
  webpackRules?(): webpack.RuleSetRule | webpack.RuleSetRule[];
  webpackPlugins?(): webpack.WebpackPluginInstance[];
  webpackConfig?(config: webpack.Configuration): void;
}