Laravel Mix simplifies asset compilation for Laravel developers by abstracting Webpack complexities. To get started, install it via npm install laravel-mix --save-dev and create a webpack.mix.js file. Then define your asset sources and output paths like mix.js('resources/js/app.js', 'public/js') and mix.sass('resources/sass/app.scss', 'public/css'). Run the build process with npm run dev. Key features include 1) versioning files with .version() to prevent caching issues, 2) enabling live reloading using mix.browserSync('your-app.test'), and 3) built-in support for React and Vue via mix.react() or mix.vue(). For advanced setups, customize public paths with mix.setPublicPath(), tweak Babel settings via config files, or set path aliases using mix.webpackConfig({ resolve: { alias: { '@': path.resolve('resources/js') } }}), all while maintaining simplicity and reducing manual Webpack configuration needs.
Compiling assets with Laravel Mix is straightforward once you understand the basics. The tool sits on top of Webpack and simplifies the process, especially for Laravel developers. You don't need to write complex Webpack configs manually — Laravel Mix handles most of that under the hood.

Basic Setup and Running Mix
If you're using Laravel, chances are you already have Laravel Mix installed via NPM. If not, install it first:
npm install laravel-mix --save-dev
Then create a webpack.mix.js
file in your project root if it doesn’t exist yet. This is where you define how your assets should be compiled.

A basic example looks like this:
let mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
This tells Mix to compile your main JavaScript and Sass files into the public/js
and public/css
directories respectively.

To run the compilation, use:
npm run dev
That’s all it takes to get started. For small projects or simple asset builds, this setup works perfectly.
Common Use Cases and Additional Features
Laravel Mix supports many common front-end workflows out of the box. Here are some you might find useful:
Versioning (cache busting):
Add.version()
at the end of your chain to automatically version your files:mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version();
In Blade templates, use
@vite
ormix()
helper to reference versioned files.BrowserSync support:
Great for live reloading during development. Just add:mix.browserSync('your-app.test');
React or Vue support:
If you're using React or Vue, Mix has built-in methods:mix.react('resources/js/app.jsx', 'public/js'); // or mix.vue('resources/js/app.vue', 'public/js');
These features save time and reduce config overhead, making Mix ideal for modern Laravel apps.
Customizing Build Behavior
Sometimes the defaults aren’t enough. Laravel Mix allows you to tweak settings without diving into raw Webpack configs.
For example, if you want to change the output directory or public path:
mix.setPublicPath('dist');
Or modify Babel settings by editing babel.config.js
or .babelrc
. Laravel Mix uses Babel by default, so adding plugins or presets follows standard Babel practices.
Another common customization: aliasing paths to avoid long relative imports:
mix.webpackConfig({ resolve: { alias: { '@': path.resolve('resources/js') } } });
Now in your JS files, you can import like this:
import App from '@/components/App.vue';
These tweaks help when your app grows and structure becomes more complex.
And that’s pretty much it. Laravel Mix covers most needs with minimal configuration. It's powerful but easy to set up, which makes it a solid choice for compiling assets in Laravel projects — no need to overcomplicate unless you hit specific limitations.
The above is the detailed content of How to compile assets with Laravel Mix?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

ToworkeffectivelywithpivottablesinLaravel,firstaccesspivotdatausingwithPivot()orwithTimestamps(),thenupdateentrieswithupdateExistingPivot(),managerelationshipsviadetach()andsync(),andusecustompivotmodelswhenneeded.1.UsewithPivot()toincludespecificcol

Laravelprovidesacleanandflexiblewaytosendnotificationsviamultiplechannelslikeemail,SMS,in-appalerts,andpushnotifications.Youdefinenotificationchannelsinthevia()methodofanotificationclass,andimplementspecificmethodsliketoMail(),toDatabase(),ortoVonage

Dependency injection automatically handles class dependencies through service containers in Laravel without manual new objects. Its core is constructor injection and method injection, such as automatically passing in the Request instance in the controller. Laravel parses dependencies through type prompts and recursively creates the required objects. The binding interface and implementation can be used by the service provider to use the bind method, or singleton to bind a singleton. When using it, you need to ensure type prompts, avoid constructor complications, use context bindings with caution, and understand automatic parsing rules. Mastering these can improve code flexibility and maintenance.

Laravel performance optimization can improve application efficiency through four core directions. 1. Use the cache mechanism to reduce duplicate queries, store infrequently changing data through Cache::remember() and other methods to reduce database access frequency; 2. Optimize database from the model to query statements, avoid N 1 queries, specifying field queries, adding indexes, paging processing and reading and writing separation, and reduce bottlenecks; 3. Use time-consuming operations such as email sending and file exporting to queue asynchronous processing, use Supervisor to manage workers and set up retry mechanisms; 4. Use middleware and service providers reasonably to avoid complex logic and unnecessary initialization code, and delay loading of services to improve startup efficiency.

Methods to manage database state in Laravel tests include using RefreshDatabase, selective seeding of data, careful use of transactions, and manual cleaning if necessary. 1. Use RefreshDatabasetrait to automatically migrate the database structure to ensure that each test is based on a clean database; 2. Use specific seeds to fill the necessary data and generate dynamic data in combination with the model factory; 3. Use DatabaseTransactionstrait to roll back the test changes, but pay attention to its limitations; 4. Manually truncate the table or reseed the database when it cannot be automatically cleaned. These methods are flexibly selected according to the type of test and environment to ensure the reliability and efficiency of the test.

LaravelSanctum is suitable for simple, lightweight API certifications such as SPA or mobile applications, while Passport is suitable for scenarios where full OAuth2 functionality is required. 1. Sanctum provides token-based authentication, suitable for first-party clients; 2. Passport supports complex processes such as authorization codes and client credentials, suitable for third-party developers to access; 3. Sanctum installation and configuration are simpler and maintenance costs are low; 4. Passport functions are comprehensive but configuration is complex, suitable for platforms that require fine permission control. When selecting, you should determine whether the OAuth2 feature is required based on the project requirements.

Laravel simplifies database transaction processing with built-in support. 1. Use the DB::transaction() method to automatically commit or rollback operations to ensure data integrity; 2. Support nested transactions and implement them through savepoints, but it is usually recommended to use a single transaction wrapper to avoid complexity; 3. Provide manual control methods such as beginTransaction(), commit() and rollBack(), suitable for scenarios that require more flexible processing; 4. Best practices include keeping transactions short, only using them when necessary, testing failures, and recording rollback information. Rationally choosing transaction management methods can help improve application reliability and performance.

The core of handling HTTP requests and responses in Laravel is to master the acquisition of request data, response return and file upload. 1. When receiving request data, you can inject the Request instance through type prompts and use input() or magic methods to obtain fields, and combine validate() or form request classes for verification; 2. Return response supports strings, views, JSON, responses with status codes and headers and redirect operations; 3. When processing file uploads, you need to use the file() method and store() to store files. Before uploading, you should verify the file type and size, and the storage path can be saved to the database.
