Skip to content

Wrong chunks order also with chunksSortMode: 'none' #481

Closed
@Ks89

Description

@Ks89

I want to create two html pages based on ejs templates, injecting chunks into the body tag.

Pages are created and everything seems to be ok, but the order of chunks is wrong.

If I use chunksSortMode:'auto' for both files -> the first is ok (polyfills->vendor->app), but the second one no (admin->polyfills->vendor)

If I use chunksSortMode:'none' for both files -> both of them are wrong. The first one is (vendor->app->polyfills), the second one (vendor->admin->polyfills)

For the first file (with app) I can use 'auto', but for the second one, I'm obliged to create a crazy-custom-order function [p..-v...-a... (not alphabetical order)] (that i don't want to post here, because it's something the no one should see :( ).

new HtmlWebpackPlugin({
      title: TITLE,
      inject: true,
      chunksSortMode: 'auto', //ok only with auto
      chunks: ['polyfills', 'vendor', 'app'],
      template: TEMPLATE_PATH,
      filename: TEMPLATE_HTML
    }),
    new HtmlWebpackPlugin({
      title: TITLE_ADMIN,
      inject: true,
      chunksSortMode: 'none' //wrong with every value -> I'm using a crazy order function (very bad)
      chunks: ['polyfills', 'vendor', 'admin'],
      template: TEMPLATE_ADMIN_PATH,
      filename: TEMPLATE_ADMIN_HTML
    }),

The expected behaviour should be this:

  • chunksSortMode: 'none', chunks: ['polyfills', 'vendor', 'admin']
....polyfills... ....vendor... ....admin... - chunksSortMode: 'none', chunks: ['polyfills', 'vendor', 'app'] ....polyfills... ....vendor... ....app...

Every other behaviour with chunksSortMode: 'none' it is weird.

PS: I created my chunks in this way (probably, the cause of this issue is here...I really don't know):

entry: {
    polyfills: './src/polyfills.ts',
    vendor: './src/vendor.ts',
    app: './src/main.ts',
    admin: './src/admin.ts'
  },
........
new CommonsChunkPlugin({
      name: ['admin', 'app', 'vendor', 'polyfills'],
      minChunks: Infinity
    }),

I used: Nodejs 7.0.0, macOS Sierra, Webpack 2.1.0 beta 25, HtmlWebpackPlugin: 2.24.1

Thank u,
Ks89

Activity

Sayan751

Sayan751 commented on Nov 4, 2016

@Sayan751

I am also facing the same issue, and described the problem in details here.

trungnguyenn

trungnguyenn commented on Nov 6, 2016

@trungnguyenn

I used chunksSortMode with custom function and it worked for me as a trick (alphabetical order)

chunks: ['vendor', 'polyfills', 'admin'],
chunksSortMode: function(a, b) {
   return (a.names[0] < b.names[0])? 1 : -1;
}
Ks89

Ks89 commented on Nov 6, 2016

@Ks89
Author

Yes. Custom functions are working, but not the other values.

humorHan

humorHan commented on Nov 7, 2016

@humorHan

This can only be a simple choice if it is positive or reverse.
Read the source to find in the function and then called the sort function, not too friendly, has been feedback

jantimon

jantimon commented on Nov 7, 2016

@jantimon
Owner

none means that it takes the sort order from the webpack compiler.

Ks89

Ks89 commented on Nov 7, 2016

@Ks89
Author

The problem is not that these functions aren't intuitive.
The problem is that they are broken, as explained in my post. It's also possible that this is a webpack issue. If 'none' means 'the same order of webpack' , this means that webpack has a bug.
I don't know.
But how can we check where is the problem?
Do you want a skeleton project to see this problem?

jantimon

jantimon commented on Nov 7, 2016

@jantimon
Owner

Feel free to contribute :)
Add some tests install iron-node or setup the node inspector and open a pull request.
Please make sure that you support webpack1, webpack2 and don't break backwards compatibility

humorHan

humorHan commented on Nov 8, 2016

@humorHan

'function', in alphabetical order, because the sort method is called internally.

Ks89

Ks89 commented on Nov 8, 2016

@Ks89
Author

Yes, sorry.
Wrong word. I called functions the strings none and so on.

humorHan

humorHan commented on Nov 8, 2016

@humorHan

@Ks89 'function', in alphabetical order, because the sort method is called internally.
Will the next version of the problem be solved

jantimon

jantimon commented on Nov 11, 2016

@jantimon
Owner

Sorry @humorHan I really don't understand what you are trying to say

humorHan

humorHan commented on Nov 11, 2016

@humorHan

@jantimon
Well, maybe I'll describe some of the problems, um... I'll describe it again.
For example, I have three JS files, I want to insert in a specific order to the HTML, but by setting a variety of chunksSortMode and can not be achieved. for example: a.js b.js c.js, I want to insert the HTML to achieve the following results :

<script src="./b.js"></script>
<script src="./a.js"></script>
<script src="./c.js"></script></body>
but,failed.

By looking at the source code to understand, it is possible because the source code inside the sort function, the loss of the flexibility of the parameters.
If you really can not understand it does not matter, I temporarily change the plugin source code to achieve the effect I want.
Thank you very much to answer questions!

jantimon

jantimon commented on Nov 11, 2016

@jantimon
Owner

You can pass a function which is in full control of sorting your assets. Didn't that work for you?

humorHan

humorHan commented on Nov 11, 2016

@humorHan

@jantimon
I tried to write a few function, but did not achieve the effect, whether it is because of the inside of the plug-in called the sort method?
I think, should remove the internal call ‘sort’ function to increase the flexibility.
that is, to remove the index.js source sort method, as follows:

index.js : about 335 line

if (typeof sortMode === 'undefined') {
sortMode = 'auto';
}
// Custom function
if (typeof sortMode === 'function') {
return chunks.sort(sortMode); // TODO Modify as: return sortMode(chunks);
}
// Disabled sorting:
if (sortMode === 'none') {
return chunkSorter.none(chunks);

}

34 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @szimek@jamesjieye@timc13@gregjacobs@kamihouse

        Issue actions

          Wrong chunks order also with chunksSortMode: 'none' · Issue #481 · jantimon/html-webpack-plugin