So I'm using Laravel 5.4 and I use webpack to compile multiple .js files in 1 big js file.

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

// Compile all CSS file from the theme
mix.styles([
   'resources/assets/theme/css/bootstrap.min.css',
   'resources/assets/theme/css/main.css',
   'resources/assets/theme/css/plugins.css',
   'resources/assets/theme/css/themes.css',
   'resources/assets/theme/css/themes/emerald.css',
   'resources/assets/theme/css/font-awesome.min.css',
], 'public/css/theme.css');



// Compile all JS file from the theme
mix.scripts([
   'resources/assets/theme/js/bootstrap.min.js',
   'resources/assets/theme/js/app.js',
   'resources/assets/theme/js/modernizr.js',
   'resources/assets/theme/js/plugins.js',
], 'public/js/theme.js');

This is my webpack.mix.js to do it (same for css). But I want to get something like: resources/assets/theme/js/* to get all files from a folder. So when I make a new js file in the folder that webpack automatically finds it, and compile it when I run the command.

Does someone know how to this?

Thanks for helping.

So I'm using Laravel 5.4 and I use webpack to compile multiple .js files in 1 big js file.

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

// Compile all CSS file from the theme
mix.styles([
   'resources/assets/theme/css/bootstrap.min.css',
   'resources/assets/theme/css/main.css',
   'resources/assets/theme/css/plugins.css',
   'resources/assets/theme/css/themes.css',
   'resources/assets/theme/css/themes/emerald.css',
   'resources/assets/theme/css/font-awesome.min.css',
], 'public/css/theme.css');



// Compile all JS file from the theme
mix.scripts([
   'resources/assets/theme/js/bootstrap.min.js',
   'resources/assets/theme/js/app.js',
   'resources/assets/theme/js/modernizr.js',
   'resources/assets/theme/js/plugins.js',
], 'public/js/theme.js');

This is my webpack.mix.js to do it (same for css). But I want to get something like: resources/assets/theme/js/* to get all files from a folder. So when I make a new js file in the folder that webpack automatically finds it, and compile it when I run the command.

Does someone know how to this?

Thanks for helping.

• javascript
• webpack
• laravel-5.4

• can you share your whole webpack.config.js? – m_callens Commented Jun 16, 2017 at 13:26
• @m_callens I've changed it! – Nieck Commented Jun 16, 2017 at 13:30

2 Answers 2

If anyone wants the code to compile all sass/less/js files in a directory to a different directory with the same filename you can use this:

// webpack.mix.js

let fs = require('fs');

let getFiles = function (dir) {
    // get all 'files' in this directory
    // filter directories
    return fs.readdirSync(dir).filter(file => {
        return fs.statSync(`${dir}/${file}`).isFile();
    });
};

getFiles('directory').forEach(function (filepath) {
    mix.js('directory/' + filepath, 'js');
});

Wildcards are actually allowed using the mix.scripts() method, as confirmed by the creator in this issue. So your call should look like this:

mix.scripts(
   'resources/assets/theme/js/*.js',
   'public/js/theme.js');

I presume it works the same for styles, since they use the same method to combine the files.

Hope this helps you.