Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack compile all files in a folder

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.

like image 618
Nieck Avatar asked Jun 16 '17 13:06

Nieck


People also ask

How do I bundle files in webpack?

You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script. But that's just the bare minimum it can do.

What is mix() in laravel?

Laravel Mix, a package developed by Laracasts creator Jeffrey Way, provides a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. In other words, Mix makes it a cinch to compile and minify your application's CSS and JavaScript files.

Does webpack need Index JS?

Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index.js and will output the result in dist/main.js minified and optimized for production.

How does a webpack work?

When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.


2 Answers

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');
});
like image 106
reflexgravity Avatar answered Sep 19 '22 04:09

reflexgravity


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.

like image 41
Asur Avatar answered Sep 21 '22 04:09

Asur