0
# Laravel Mix
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: laravel-mix
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install laravel-mix`
10

11
## Core Imports
12

13
```javascript
14
const mix = require('laravel-mix');
15
```
16

17
For ES modules:
18

19
```javascript
20
import mix from 'laravel-mix';
21
```
22

23
## Basic Usage
24

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

27
```javascript
28
const mix = require('laravel-mix');
29

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

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

36
// Version assets for cache busting
37
mix.version();
38
```
39

40
Run with CLI commands:
41

42
```bash
43
# Development build
44
npx mix
45

46
# Production build  
47
npx mix --production
48

49
# Watch for changes
50
npx mix watch
51

52
# Hot module replacement
53
npx mix watch --hot
54
```
55

56
## Architecture
57

58
Laravel Mix is built around several key components:
59

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

66
## Capabilities
67

68
### JavaScript Compilation
69

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

72
```javascript { .api }
73
// Modern JavaScript compilation
74
js(src: string | string[], output: string): Api;
75

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

80
// CoffeeScript compilation
81
coffee(src: string | string[], output: string): Api;
82
```
83

84
[JavaScript Compilation](./javascript-compilation.md)
85

86
### CSS Preprocessing
87

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

90
```javascript { .api }
91
// PostCSS compilation
92
css(src: string, output: string, plugins?: AcceptedPlugin[]): Api;
93
postCss(src: string, output: string, plugins?: AcceptedPlugin[]): Api;
94

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

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

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

105
[CSS Preprocessing](./css-preprocessing.md)
106

107
### Framework Integration
108

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

111
```javascript { .api }
112
// Vue.js support (auto-detects version 2 or 3)
113
vue(config?: VueConfig): Api;
114

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

118
// Preact support
119
preact(): Api;
120

121
interface VueConfig {
122
  version?: number;
123
  globalStyles?: false | string | string[] | Record<string, string | string[]> | null;
124
  extractStyles?: boolean | string;
125
  useVueStyleLoader?: boolean;
126
  runtimeOnly?: boolean;
127
  options?: VueLoaderOptions;
128
}
129

130
interface ReactConfig {
131
  extractStyles?: boolean | string;
132
}
133
```
134

135
[Framework Integration](./framework-integration.md)
136

137
### File Operations
138

139
File copying, concatenation, and asset management utilities.
140

141
```javascript { .api }
142
// Copy files and directories
143
copy(from: string | string[], to: string): Api;
144
copyDirectory(from: string | string[], to: string): Api;
145

146
// File concatenation and processing
147
combine(src: string | string[], output?: string, babel?: boolean): Api;
148
babel(src: string | string[], output?: string, babel?: boolean): Api;
149
minify(src: string | string[], output?: string, babel?: boolean): Api;
150
scripts(src: string | string[], output?: string, babel?: boolean): Api;
151
styles(src: string | string[], output?: string, babel?: boolean): Api;
152
```
153

154
[File Operations](./file-operations.md)
155

156
### Build Features
157

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

160
```javascript { .api }
161
// Asset versioning with cache busting
162
version(files?: string | string[]): Api;
163

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

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

173
// Live reloading with BrowserSync
174
browserSync(config?: BrowserSyncConfig): Api;
175
browserSync(proxy: string): Api;
176
```
177

178
[Build Features](./build-features.md)
179

180
### Configuration and Customization
181

182
Webpack configuration, path management, and API extension capabilities.
183

184
```javascript { .api }
185
// Path configuration
186
setPublicPath(path: string): Api;
187
setResourceRoot(path: string): Api;
188

189
// Mix configuration
190
options(options: MixConfig): Api;
191

192
// Webpack configuration
193
webpackConfig(config: webpack.Configuration): Api;
194
webpackConfig(callback: Function): Api;
195
override(callback: Function): Api;
196

197
// Babel configuration
198
babelConfig(config: BabelConfig): Api;
199

200
// API extension
201
extend(name: string, component: Component): Api;
202
```
203

204
[Configuration and Customization](./configuration.md)
205

206
## CLI Commands
207

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

210
```bash { .api }
211
# Build assets (default command)
212
mix [options]
213
mix build [options]
214

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

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

226
**Command Examples:**
227

228
```bash
229
# Development build
230
npx mix
231

232
# Production build with optimizations
233
npx mix --production
234

235
# Watch with hot reloading
236
npx mix watch --hot
237

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

241
# Production build with custom config and no progress
242
npx mix build --production --mix-config production.mix.js --no-progress
243
```
244

245
## Global API Methods
246

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

249
```javascript { .api }
250
// Environment detection
251
inProduction(): boolean;
252

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

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

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

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

268
// Notifications
269
disableNotifications(): Api;
270
disableSuccessNotifications(): Api;
271

272
// Debug utilities
273
dump(): Api;
274
dumpWebpackConfig(): Api;
275
```
276

277
## Core Type Definitions
278

279
```javascript { .api }
280
// Core API interface
281
interface Api {
282
  // All the methods above return this interface for chaining
283
}
284

285
// Helper types for global methods
286
interface MixHelpers {
287
  File: typeof File;
288
  paths: Paths;
289
  chunks: Chunks;
290
  dependencies: Dependencies;
291
}
292

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

296
// Extract types for vendor extraction
297
interface Extraction {
298
  test?: ExtractTestCallback;
299
  libs?: string[];
300
  to?: string;
301
}
302

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

305
// Configuration types
306
interface MixConfig {
307
  production?: boolean;
308
  hmr?: boolean;
309
  https?: boolean;
310
  hmrOptions?: { host: string; port: string; };
311
  publicPath?: string;
312
  resourceRoot?: string;
313
  runtimeChunkPath?: string | null;
314
  manifest?: string | false;
315
  postCss?: AcceptedPlugin[];
316
  autoprefixer?: false | AutoprefixerConfig;
317
  processCssUrls?: boolean;
318
  cssModuleIdentifier?: string;
319
  notifications?: { onSuccess?: boolean; onFailure?: boolean; };
320
  clearConsole?: boolean;
321
  imgLoaderOptions?: ImageLoaderOptions;
322
  fileLoaderDirs?: { images?: string; fonts?: string; };
323
  assetModules?: boolean;
324
  assetDirs?: { images?: string; fonts?: string; };
325
  terser?: TerserPluginOptions;
326
  cssNano?: false | CssNanoConfig;
327
  cleanCss?: CleanCssConfig;
328
  legacyNodePolyfills?: boolean;
329
  webpackConfig?: webpack.Configuration;
330
  babelConfig?: BabelConfig;
331
}
332

333
interface ImageLoaderOptions {
334
  enabled?: boolean;
335
  gifsicle?: GifsicleConfig;
336
  mozjpeg?: MozjpegConfig;
337
  optipng?: OptipngConfig;
338
  svgo?: SvgoConfig;
339
}
340

341
interface BabelConfig {
342
  presets?: Array<string | [string, any]>;
343
  plugins?: Array<string | [string, any]>;
344
  [key: string]: any;
345
}
346

347
interface BrowserSyncConfig {
348
  proxy?: string;
349
  server?: string | boolean | { baseDir: string; };
350
  files?: string[];
351
  [key: string]: any;
352
}
353

354
// PostCSS plugin type
355
type AcceptedPlugin = any;
356

357
// External library configuration types (referenced but defined by their respective packages)
358
interface AutoprefixerConfig { [key: string]: any; }
359
interface TerserPluginOptions { [key: string]: any; }
360
interface CssNanoConfig { [key: string]: any; }
361
interface CleanCssConfig { [key: string]: any; }
362
interface GifsicleConfig { [key: string]: any; }
363
interface MozjpegConfig { [key: string]: any; }
364
interface OptipngConfig { [key: string]: any; }
365
interface SvgoConfig { [key: string]: any; }
366
interface VueLoaderOptions { [key: string]: any; }
367

368
// Component interface for extending Mix
369
interface Component {
370
  register?(...args: any[]): void;
371
  boot?(): void;
372
  dependencies?(): string | string[];
373
  webpackEntry?(entry: webpack.EntryObject): void;
374
  webpackRules?(): webpack.RuleSetRule | webpack.RuleSetRule[];
375
  webpackPlugins?(): webpack.WebpackPluginInstance[];
376
  webpackConfig?(config: webpack.Configuration): void;
377
}
378
```