mjlovefl's avatar

MIX: How can I run only running a subset of my webpack.mix.js file

Inside my webpack.mix.js file, I am compiling bootstrap with my custom variables. However, this is very rarely changed. Is there a way to define subcommands in webpack.mix.js?

So perhaps something like:

npm run dev:css 
npm run dev:bootstrap

and it would only compile a specified group of css?

0 likes
8 replies
mjlovefl's avatar

I achieve some separation simply by defining several actions in webpack.mix.js as:

mix.combine([
    'resources/assets/js/public.js',
    'resources/assets/js/Public/**/*.js'
    ], 'public/assets/js/public.js').version();

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

mix.sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/assets/css').version();

I guess what I am missing from gulp and grunt is the ability to group actions and only running a specific group.

For instance I would often have a grunt/gulp command to copy specific files into a directory (not related to the project). I would do this as a quick way to move a JS library that was a separate project into a main project while developing.

grunt copy:myproject for instance would basically move all the dist files into my other project as if I was doing a "bower update".

Or the ability to only run the JS files but not the CSS files.

I'm not sure I completely understand the advantages of Mix over Elixir yet.

Borisu's avatar

@mikepmtl Well using webpack gives you a lot of freedom to minify, extract (as I pointed out, for caching and performance), as well as clean your code. If you set it up, webpack will check for any unused javascript when compiling and remove it from your distribution file, thus making the overall size of your application smaller. I really suggest you read up on the documentation of laravel-mix, as it has presets to do all that.

Back to the original question: It is possible to run a subset, but you will need to publish the webpack.config file, copy it and change the Mix.initialize() method to something which loads another file for example css.mix.js. Then you will be able to change the package.json script to use your custom configuration which will in turn only fire the methods you specify in your css.mix.js. This is unnecessary as webpack won't overwrite cached versioned files like vendor-files etc...

I really don't see why you would want to do this, as the extract method should cover all your needs for caching etc.

mjlovefl's avatar

I think what I will do is still use grunt to run my other tasks but include a task to run "npm run dev" and so on.

Thanks

Borisu's avatar

Well honestly I think you're gonna miss out on the nice perks and as I said, the version method will not override your unchanged files, effectively keeping the cache intact for the user. But whatever works best for you IS the best solution ;)

mjlovefl's avatar

I think you misunderstood. Basically I am using grunt to run Mix.

That was I can still use grunt for other tasks as well.

Borisu's avatar

Ah ok hehe :D you are correct I misunderstood.

Please or to participate in this conversation.