Laravel-mix: Generate manifest for each javascript

[henry-spanka]

I have the following webpack.mix.js:

mix.js('resources/assets/js/app.js', 'public/js').extract(
    ['foundation-sites', 'jquery', './resources/assets/js/laravel.js'], 'public/js/vendor.js'
);
mix.sass('resources/assets/sass/app.scss', 'public/css');

mix.js('resources/assets/admin/js/app.js', 'public/admin/js').extract(
    ['bootstrap-less', 'jquery', './resources/assets/admin/js/laravel.js'], 'public/admin/js/vendor.js'
);

This does work fine, however only one manifest is generated for admin javascript. This causes issues as I want to have a manifest for each mixed javascript to properly reference them in Blade using mix('path')

Output:

                                /js/app.f5a95ef2399c6a36eae4.js    1.08 MB    0, 4  [emitted]  [big]  /js/app
                                    /admin/js/app.69d60a6a37568b8adc3a.js     879 kB    1, 4  [emitted]  [big]  /admin/js/app
                                 /admin/js/vendor.0ccb9485f3e36472e423.js     337 kB    2, 4  [emitted]  [big]  /admin/js/vendor
                                       /js/vendor.d928eb65fcaa6bc93bbd.js     329 kB    3, 4  [emitted]  [big]  /js/vendor
                               \admin\js\manifest.d41d8cd98f00b204e980.js    5.68 kB       4  [emitted]         \admin\js\manifest
                                        /css/app.a3294d13b651cbe42440.css    1.33 MB    0, 4  [emitted]  [big]  /js/app
                                  /admin/css/app.a3294d13b651cbe42440.css     670 kB    0, 4  [emitted]  [big]  /js/app

[JeffreyWay]

Are you referring to the mix-manifest.json file, or the manifest.js? If the latter, you only need one of those for your project.

[henry-spanka]

I'm referring to the latter (manifest.js) but I don't like referencing the manifest in the admin folder in blade templates that generate client content. It's not a big deal but would be nice if two manifests would be generated.

[henry-spanka]

@JeffreyWay just tested your suggestion and it doesn't work. The manifest MUST be generated for each javascript resource independently.

Error:

Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.d41d8cd….js:53)
    at Object.15 (vendor.d4eabf3….js:2404)
    at __webpack_require__ (manifest.d41d8cd….js:53)
    at Object.79 (vendor.d4eabf3….js:2411)
    at __webpack_require__ (manifest.d41d8cd….js:53)
    at webpackJsonpCallback (manifest.d41d8cd….js:24)
    at vendor.d4eabf3….js:1

Uncaught TypeError: Cannot read property 'jquery' of undefined
    at app.609e1c2….js:12223
    at app.609e1c2….js:12235
    at Object.<anonymous> (app.609e1c2….js:12737)
    at Object.8 (app.609e1c2….js:12739)
    at __webpack_require__ (manifest.d41d8cd….js:53)
    at Object.<anonymous> (app.609e1c2….js:382)
    at Object.35 (app.609e1c2….js:438)
    at __webpack_require__ (manifest.d41d8cd….js:53)
    at Object.20 (app.609e1c2….js:325)
    at __webpack_require__ (manifest.d41d8cd….js:53)

[eblin]

I would suggest you put the manifest outside the admin and somewhere like common folder. Reason is that, although you are getting different bundles with mix.js() the manifest.js is really what glues everything together regardless of where those bundles are being included, this is part of code splitting that webpack does. I'm not even sure webpack can output multiple manifest.js

More info: https://webpack.js.org/guides/code-splitting-libraries/#manifest-file

[JeffreyWay]

I'm sure you only need one manifest.json file, so there may be a separate issue at play. You can create a new issue if you can determine what that is.

[arcanedev-maroc]

Hi @JeffreyWay,

I had same issue as @henry-spanka.

What he mean is that extracting vendor libs from different app.js (one for front and other for admin).

The generated mix-manifest.json will be something like this:

{
  "/css/app.css":          "/css/app.css",
  "/js/app.js":            "/js/app.js",
  "/js/vendors.js":        "/js/vendors.js",
  "/admin/css/app.css":    "/admin/css/app.css",
  "/admin/js/app.js":      "/admin/js/app.js",
  "/admin/js/vendors.js":  "/admin/js/vendors.js",
  "/admin/js/manifest.js": "/admin/js/manifest.js"
}

As you can see, the mix-manifest.json is missing "/js/manifest.js" and it crash the application when you call {{ mix("js/manifest.js") }} with this message:

Unable to locate Mix file: /js/manifest.js. Please check your webpack.mix.js output paths and try again. (View: [view-path]) (View: [view-path])

Can you help us @JeffreyWay to solve this issue ?

I really want to help to solve this issue but i know nothing about how webpack works.

Best regards

UPDATE

I found this doc interesting.

How to use this example with mix ?

[arcanedev-maroc]

Related: #224

And this is my repo if you want to reproduce the issue: https://github.com/ARCANESOFT/ARCANESOFT/blob/8560d5847215bb68260b49f2a1de7d801f78249b/webpack.mix.js

UPDATE

This is my last commit and everything works for the time being.

I hope this helps anyone that have the same issue: https://github.com/ARCANESOFT/ARCANESOFT/blob/4688a7aac5e2b2272ba8679a1b85d5722a064bdb/webpack.mix.js

[moyvera]

@henry-spanka did you find some solution ?? @arcanedev-maroc I see your current configuration leaving all the code in one directory, but did you find how to separate the code in directories with the right generation of the manifest ???

@JeffreyWay when you say that we only need one manifest.js...

what's the way we need to organize our directories ??

I tried... copy the manifest.js file, include the manifest.js but I get the next error

manifest.js:53 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.js:53)
    at Object.module.exports.nativeSplit (vendor.js:10916)
    at __webpack_require__ (manifest.js:53)
    at Object.<anonymous> (vendor.js:646)
    at __webpack_require__ (manifest.js:53)
    at Object.<anonymous> (vendor.js:13053)
    at __webpack_require__ (manifest.js:53)
    at webpackJsonpCallback (manifest.js:24)
    at vendor.js:1

[iraklisg]

@arcanedev-maroc explicitly defining the vendor output path did the trick form me :+1:

mix.js('resources/assets/js/main/app.js', 'public/js/main');
mix.js('resources/assets/js/admin/app.js', 'public/js/admin')
    .extract([
        'vue',
        'axios',
        'jquery',
    ], '/js/vendor.js');

Nevertheless, following that approach, isn't it reasonable to only extract the common libraries used between the _front_ and the _back_ site? Because you end up with a single vendor.js file that should be referenced both in the _front_ and the _back_ site