search

shellscape / webpack-manifest-plugin

webpack plugin for generating asset manifests
MIT License
1.43k stars 186 forks source link

Wrong order of asset ressources #254

Closed hirbod closed 2 years ago

hirbod commented 3 years ago

Expected Behavior

Should output assets inside of manifest.json in the same order as HTMLWebpackPlugin injects into <head>.

Actual Behavior

It renders the manifest.json file correctly but not respecting the order.

Additional Information

@shellscape As discussed in ticket #234, this plugin does not respect the order of resources. I want to use the manifest to insert the script and CSS tags in my template engine via PHP. However, the order for this is essential, otherwise scripts will be loaded too early or too late.

I know that the plugin has a sort function, but I do not know how I can use it to create the original order.

In the "dist" directory you can see the generated "index.html" and the correct order of the CSS and JS files. But if you now look at the manifest.json, the order is completely wrong.

index.html: https://repl.it/@Hirbod/manifest-plugin-repro#dist/index.html manifest.json: https://repl.it/@Hirbod/manifest-plugin-repro#dist/manifest.json

As already said, I am not sure if this is expected, imho it should be not.

hirbod commented 3 years ago

I did a little bit of debugging, using the function "generate"

      generate: (seed, files, entries) => {
        console.log(entries);
        return {};
      },

Logging files result into the final order like inside manifest.json, but logging entries it results in

{
  vendor: [
    'js/runtime.js',
    'js/npm-72fcc22f.js',
    'js/npm-4d126b9f.js',
    'js/npm-7f1549f5.js',
    'js/npm-a1087d6d.js',
    'js/npm-68de3578.js',
    'js/npm-a58c7f16.js',
    'js/npm-dae626cc.js',
    'js/npm-14b44f88.js',
    'js/npm-7a83e1a3.js',
    'css/npm-7a83e1a3.981f95f02b74f3fc7567.css',
    'js/vendor.js'
  ],
  app: [
    'js/runtime.js',
    'js/npm-72fcc22f.js',
    'js/npm-4d126b9f.js',
    'js/npm-7f1549f5.js',
    'js/npm-a1087d6d.js',
    'js/npm-68de3578.js',
    'js/npm-a58c7f16.js',
    'js/npm-dae626cc.js',
    'js/npm-14b44f88.js',
    'js/npm-7a83e1a3.js',
    'css/npm-7a83e1a3.981f95f02b74f3fc7567.css',
    'js/app-31743c5a.js',
    'js/app-1a758805.js',
    'css/app-1a758805.16e732b1f6f5690cf531.css'
  ]
}

which actually is the accurate order, but still have duplicates in vendor and apps, but it does look like app has a perfect order (but missing vendor.js) and all the files needed for me (I need to remove css though and generate a separate css manifest-css.json).

So the "correct order" is indeed somehow available, but currently being ignored.

hirbod commented 3 years ago

Regarding to https://stackoverflow.com/questions/55921186/does-the-script-tag-order-matter-for-webpack-generated-files and my own tests, the JS loading order is not important at all.

I did some tests in my output and it really did not matter in which order I've loaded the files, my application never broke.. I'll still leave this ticket open, because it might still be a thing for other people or specially assets like fonts or css, where order indeed is a thing.

hirbod commented 3 years ago

@shellscape any chance you can have a look at this? I provided all the details you asked for and spend a good amount of time to create a test.

shellscape commented 3 years ago

Sorry, my 8 month old daughter with RSV is having trouble breathing and can only sleep a few hours at night and requires a lot of attention. So when I'm not taking care of her right now I'm working my full time job to support my family because, ya know, open source doesn't pay the bills or keep my daughter healthy or alive.

hirbod commented 3 years ago

I'm a father of 2 boys, family first. Wish your daughter all the best. I hope she gets well quickly

hirbod commented 3 years ago

I dropped you a small donation

shellscape commented 3 years ago

Much appreciated!

stale[bot] commented 3 years ago

Hey folks. This issue hasn't received any traction for 60 days, so we're going to close this for housekeeping. If this is still an ongoing issue, please do consider contributing a Pull Request to resolve it. Further discussion is always welcome even with the issue closed. If anything actionable is posted in the comments, we'll consider reopening it. ⓘ

hirbod commented 3 years ago

Not stale

shellscape commented 2 years ago

@Hirbod doing some work on this package this week and next. Any chance you could PR a failing test that demonstrates your expectations? That would go a long way in making sure it's addressed properly for your needs.

Edit

In the "dist" directory you can see the generated "index.html" and the correct order of the CSS and JS files. But if you now look at the manifest.json, the order is completely wrong.

I'll have another look at this to see if this gives me what I'd need

stale[bot] commented 2 years ago

Hey folks. This issue hasn't received any traction for 60 days, so we're going to close this for housekeeping. If this is still an ongoing issue, please do consider contributing a Pull Request to resolve it. Further discussion is always welcome even with the issue closed. If anything actionable is posted in the comments, we'll consider reopening it. ⓘ