Description
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']
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 commentedon Nov 4, 2016
I am also facing the same issue, and described the problem in details here.
trungnguyenn commentedon Nov 6, 2016
I used chunksSortMode with custom function and it worked for me as a trick (alphabetical order)
Ks89 commentedon Nov 6, 2016
Yes. Custom functions are working, but not the other values.
humorHan commentedon Nov 7, 2016
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 commentedon Nov 7, 2016
none
means that it takes the sort order from the webpack compiler.Ks89 commentedon Nov 7, 2016
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 commentedon Nov 7, 2016
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 commentedon Nov 8, 2016
'function', in alphabetical order, because the sort method is called internally.
Ks89 commentedon Nov 8, 2016
Yes, sorry.
Wrong word. I called functions the strings none and so on.
humorHan commentedon Nov 8, 2016
@Ks89 'function', in alphabetical order, because the sort method is called internally.
Will the next version of the problem be solved
jantimon commentedon Nov 11, 2016
Sorry @humorHan I really don't understand what you are trying to say
humorHan commentedon Nov 11, 2016
@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 commentedon Nov 11, 2016
You can pass a function which is in full control of sorting your assets. Didn't that work for you?
humorHan commentedon Nov 11, 2016
@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 line34 remaining items