jaketrent / html-webpack-template

a better default template for html-webpack-plugin
MIT License
830 stars 139 forks source link

Differentiate css and js for template in chunks #69

Open rajar-r opened 6 years ago

rajar-r commented 6 years ago

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) { %>

<% } %>

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

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

<% } %>

phiphou commented 6 years ago

Same for me, need information.

jaketrent commented 6 years ago

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 commented 6 years ago

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>
<% } %>