Differentiate css and js for template in chunks

[rajar-r]

on using this below all the chunks including css are also added as script html tag element rather than css tag element. how to add css with link tag and js with script tag using chunks.

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>

<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>

<% } %>

Also tried using below , but this include the css as well.

<% for (var chunk in htmlWebpackPlugin.files.js) { %>

<script src="<%= htmlWebpackPlugin.files.js[chunk]%>"></script>

<% } %>

[phiphou]

Same for me, need information.

[jaketrent]

I'm not sure that I know what is going on here. Please offer me some code or something more concrete about the problem you're having.

As I understand it, webpack is producing js files by default. These chunks will show up here, as you've mentioned:

https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs#L104

If you're producing .css files, you're probably using ExtractTextPlugin or something like that and then will get css files here, right?:

https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs#L48

[phiphou]

You can use inject: true, and get rid of

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>

or use htmlWebpackPlugin.files.chunks for js and htmlWebpackPlugin.files.css for styles

<% for (var chunk in htmlWebpackPlugin.files.js) { %>
    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry%>"></script>
<% } %>

and

<% for (var style in htmlWebpackPlugin.files.css) { %>
    <script src="<%= htmlWebpackPlugin.files.css[style]%>"></script>
<% } %>