Combine the Nwidart Laravel Modules Assets to Public using Laravel Mix
Tags: laravel, laravelmix, php
Published: 2022-03-23 06:19:33

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/laravel/combine-the-nwidart-laravel-modules-assets-to-public-using-laravel-mix

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)


In this post, if you are using Nwidart Laravel Modules for your Laravel Project and you want to combine the modules assets to the public into one using Laravel mix. Then this is for you before I did this post I got a problem also on how to do it until I found a solution and I modified it that suitable for my needs. In your **webpack.mix.js** file inside your **Laravel Project** you will see their default code:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
```


As you can see the code only read the **resources** folder so I modified the code to read dynamically every modules **js** and **sass** file and here is the final code below:

```php
const mix = require('laravel-mix');
const fs = require('fs');
const path = require('path');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

const moduleFolder = './Modules';

const dirs = p => fs.readdirSync(p).filter(f => fs.statSync(path.resolve(p,f)).isDirectory());

// Get the available modules return as array
let modules = dirs(moduleFolder);

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

// Loop available modules
modules.forEach(function(mod){
   mix.js(__dirname  + "/Modules/" + mod + "/Resources/assets/js/app.js", 'public/js');
   mix.sass(__dirname  + "/Modules/" + mod + "/Resources/assets/sass/app.scss", 'public/css');
});

// Let's parse again to fix the newline every module for css
mix.styles(['public/css/app.css'], 'public/css/app.css');
```
So if your **webpack.mix.js** file has a default code then just replace it with the code above. I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/combine-the-nwidart-laravel-modules-assets-to-public-using-laravel-mix if you want to download this code.

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)

Happy coding :)