Level 104
Have a look at code splitting which is a webpack feature. There is a good explanation using Laravel Mix here
May 12, 2020
9
Level 5
use laravel-mix to create more then one js mix
I have the following scenario:
I have 2 views product.blade.php and checkout.blade.php (a product page and a checkout page)
In the package.json I will install all the vue modules and what is needed for all the pages ( product and checkout)
I want to have 2 different app.js with different logic and vue modules loaded: one for product and one for checkout. I want to be able to run dev or compile for production separately and import them in the blade files:
in product.blade.php
<script src="{{ mix('/js/product.js') }}"></script>
and in the checkout.blade.php
<script src="{{ mix('/js/checkout.js') }}"></script>
Every page has different modules loaded and different logic. I don't one big app.js to load all the logic and modules for all the pages.
It is possible to use laravel-mix to work like I want?
Level 5
@tykus so you are saying that laravel-mix does not support it by default (only the base extract https://laravel-mix.com/docs/5.0/extract)
So I need to use this plugin
npm install babel-plugin-syntax-dynamic-import --save-dev
to separate the compiled files what I need.
Am I right ?
Level 75
@calin.ionut Just create two separates files, and compile it in webpack.mix.js, like
mix.js('resources/js/product.js', 'public/js/product.js');
mix.js('resources/js/checkout.js', 'public/js/checkout.js');
Documentation: https://laravel.com/docs/7.x/mix#working-with-scripts
Level 5
@michaloravec it does the trick :)
How can I work with only one file at a time, I mean if I run
npm run watch
it will compile both of them. Probably the same if run
npm run production
That means if I work and make changes only in product.js and run watch or production it make changes in checkout.js too.
Is there a way to run watch or run production for a single file ?
Level 75
@calin.ionut Actually I'm not sure if it's something like that possible. Maybe somehow with webpack configuration.
Level 19
Have a look at this blogpost. Especially the part where the author uses multiple mix files for compiling files for different parts of your application. In this approach he makes of this Laravel Mix Merge Manifest package.
From own experience I can tell you it works without any problems.
Level 75
@calin.ionut Did you solved your problem?
Level 5
@michaloravec I didn't solve the " run production for a single file" problem.
I was busy this week....i will give it a read the article that @sidneygijzen posted and see if it's work.
Level 5
Any updates in the new version of mix that can run scripts on different mix js ?
If having :
mix.js('resources/js/product.js', 'public/js/product.js');
mix.js('resources/js/checkout.js', 'public/js/checkout.js');
to run them individual:
ex:
npm run watch product_mix
or
npm run watch checkout_mix
???
Please or to participate in this conversation.