HtmlWebpackPlugin use property chunks renders htmlWebpackPlugin.files.css empty

Question

I have the following settings in my webpack.config.js.

I use chunks because I need the produced bundles to come in a specific order.

And the below setting works, but my bundled css is not found in htmlWebpackPlugin.files.css anymore.

plugins: [
  new HtmlWebpackPlugin({
    filename: path.join(__dirname, '/dist/app/index.html'),
    favicon: 'assets/favicon.ico',

    chunks: [
      'scripts/jquery.js',
      'scripts/angular.js',
      'scripts/angular-animate.js',
      'scripts/uirouter.js',
      'scripts/app.js',
    ],
    chunksSortMode: 'manual',

    hash: true,
    inject: false,
    title: 'App',
    template: path.join(__dirname, '/index.template'),
  }),
];

My template looks as following

<% for (var item in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[item] %>" rel="stylesheet">
<% } %> <-------------- empty when I use chunks

<% for (var item in htmlWebpackPlugin.options.chunks ) { %>
<script src="<%= htmlWebpackPlugin.options.chunks[item] %>"></script>
<% } %> <-------------- works, but the output does not have any hash

Moreover when I use chunks it makes the hash property useless since it does not post fix file names with hash anymore.

Is it that suppose to work like that? That is, if I use chunks then I need to include the bundled css file in there as well?

Updated

Added a small example which produces the issue I'm wondering about

Answer 1

There is no need to specify the chunks (nor the order), webpack will use the import order as the order of the chunks.

So, if you remove chunks & chunksSortMode & inject: false, the HtmlWebpackPlugin will inject the files properly.

I've made a PR to your repo with the fix.