About Metacubic

Metacubic is a leading mobile app and enterprise software development company! – expert in development, customization, and integration of complex enterprise-level solutions, business intelligence analytics, advanced web and mobile solutions since 2016. Metacubic offers winning app strategies, stunning app designs, powerful agile app development and stand-out launch marketing. One of the pioneers in mobile app development services, we have worked for clients that include individuals, startups, and organizations.

Contact Info
+1(302)520-2460 info@metacubic.com Suite B #305 2803 Philadelphia Pike Claymont, DE 19703 United States
Laravel Mix: Webpack Made Easy

Laravel Mix: Webpack Made Easy

Webpack Made Easy

In this tutorial, we’ll explore Laravel Mix, a powerful and user-friendly tool that simplifies working with Webpack in Laravel applications. Laravel Mix makes it effortless to compile and manage your front-end assets, such as CSS, JavaScript, and images. By the end of this tutorial, you’ll have a solid grasp of how to set up and use Laravel Mix in your Laravel projects.


Before we start, ensure that you have the following prerequisites installed on your system:

  • Node.js (version 14 or higher)
  • npm (usually comes with Node.js)
  • A Laravel project (You can create one using composer create-project --prefer-dist laravel/laravel project-name)

Easy: Installing Laravel Mix

Step 1: Create a Laravel Project (If Not Already Done)

If you haven’t created a Laravel project yet, you can create one using the following command:

composer create-project --prefer-dist laravel/laravel laravel-mix-demo Click me to Get Code

Step 2: Install Laravel Mix

Navigate to your Laravel project directory and install Laravel Mix via npm:

cd laravel-mix-demo
npm install laravel-mix --save-dev

Medium: Setting Up Your First Mix Configuration

Step 1: Create a JavaScript File

In your Laravel project’s resources/js directory, create a simple JavaScript file. For example, create app.js with the following content:

// resources/js/app.js
console.log('Hello from Laravel Mix!');

Step 2: Configure Laravel Mix

Open your project’s webpack.mix.js file and define a basic Mix configuration to compile your JavaScript file. Here’s an example:

// webpack.mix.js
const mix = require('laravel-mix');
mix.js(‘resources/js/app.js’, ‘public/js’);

Step 3: Compile Assets

Now, run the following command to compile your assets using Laravel Mix:

npm run dev

Your JavaScript file will be compiled and placed in the public/js directory.

Hard: Adding CSS and More

Step 1: Create a CSS File

Create a CSS file, for example, styles.css, in the resources/css directory with some styles:

/* resources/css/styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;

Step 2: Update Mix Configuration

In your webpack.mix.js file, update the configuration to include CSS compilation:

// webpack.mix.js
const mix = require('laravel-mix');
mix.js(‘resources/js/app.js’, ‘public/js’)
.sass(‘resources/css/styles.css’, ‘public/css’);

Step 3: Compile CSS and JavaScript

Run the following command to compile both JavaScript and CSS:

npm run dev

Your CSS and JavaScript files will be compiled into the respective public directories.


Laravel Mix simplifies asset compilation and management in Laravel applications. With this tutorial, you’ve learned how to set up Laravel Mix, create a basic configuration, and compile JavaScript and CSS files. You can now expand your knowledge by integrating more front-end libraries, optimizing assets for production, and exploring advanced Mix features to enhance your Laravel projects. Happy coding!

Post a Comment