Html-webpack-plugin: Version 3.0

Created on 23 Jan 2017 · 27Comments · Source: jantimon/html-webpack-plugin

At all contributors
@SpaceK33z, @SimenB, @numical, @kennyt, @okhomenko, @cgreening, @anjianshi, @mistadikay, @mc-zone, @JSteunou, @spuf, @vincentngthu, @NekR, @mateatslc, @chiplay, @ascariandrea, @graingert, @zzuieliyaoli, @foglerek, @sandeep45, @koenpunt, @sokra, @shprink, @cesarandreu, @oliviertassinari, @sebastienbarre, @jamesjieye, @AndrewRayCode, @kurtharriger, @ai, @PeachScript, @kinday, @TalAter, @chrillo, @timoxley, @insin, @adjohnson916, @Madalosso, @mgol, @victorwpbastos, @pburtchaell, @dtinth, @yyx990803, @michael-wolfenden, @denis-sokolov, @jirikolarik, @jpetitcolas, @ruehl, @Foxandxss, @creeperyang, @vyorkin, @thomasguillory, @tlrobinson, @nartamonov

I am planning to move the webpack-html-plugin forward to 3.0 and would like to gather your input which (breaking-)changes you would like to see

Planed changes:

Use stats.entrypoints to determine which links/scripts should be added to the html. (Unfortunately this will stop the support for webpack 1 as @sokra won't port this feature back into webpack 1)
Finally jump up some node versions to node 4 (the official supported version for webpack 2)
Remove type: 'text/javascript'
Remove html minifcation (could still be done by a plugin if needed)
Remove chunksSortMode (as stats.entrypoints are already sorted)

Open for discussion:

Switch to ava
Generate multiple html files (e.g. by using [name] as output name)

Source

jantimon

🎉7 ❤6

Most helpful comment

I'm looking forward to the feature of generating multiple html files. :+1:

vincent-ng on 24 Jan 2017

👍3

All 27 comments

these changes won't break my build.

graingert on 24 Jan 2017

👍1

Sounds like good changes, I agree with all of them 👍 . Let me know if you need any help with the changes, I might have some time next week.

SpaceK33z on 24 Jan 2017

Better favicon support would be fantastic.

Em 23 de jan de 2017 21:18, "Kees Kluskens" notifications@github.com
escreveu:

Sounds like good changes, I agree with all of them 👍 . Let me know if you
need any help with the changes, I maybe have some time next week.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ampedandwired/html-webpack-plugin/issues/558#issuecomment-274649505,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA-GqyHWGP4TigN3aTscvycEko19Ol5Oks5rVTUsgaJpZM4Lrp6G
.

victorwpbastos on 24 Jan 2017

Would you consider discussion around migrating repo to github.com/webpack-contrib org?

TheLarkInn on 24 Jan 2017

None of the changes will affect me. 👍

Remove type: 'text/javascript

This was added via #311 (original issue: #309). As it turns out, the issue I originally reported was caused by the font-feature-settings CSS property. If you use that property on Safari, it breaks the page entirely. So, unless there was another reason why this was added, I think we can remove it.

pburtchaell on 24 Jan 2017

I'm looking forward to the feature of generating multiple html files. :+1:

vincent-ng on 24 Jan 2017

👍3

Generate multiple html files is a good feature!

Include it with v3 😄

creeperyang on 24 Jan 2017

You know that you can generate multi html files by using multiple instances of HtmlWebpackPlugin, right?

NekR on 24 Jan 2017

Sure. I think it's not elegant if you using ten instances for ten pages. (Although you can use something like Array.map). Support multiple pages with one instance is great.

creeperyang on 24 Jan 2017

Only thing there that I'd need to make changes for is minifying, and I wholly support making a separate plugin for it. So 👍 from me! 😄
A change you could consider is dropping Bluebird for native promises. That would break my plugin (http://npm.im/add-asset-html-webpack-plugin), but I can just wrap it in Bluebird on my side (as I need the ordered iteration it provides).

SimenB on 24 Jan 2017

How about isomorphic support?

I've been looking for an elegant solution about template reusability when I use server-rendering.

Like the following (A rough example):

A common template :

template.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

<!-- Use a special format to pass server-rendering data? -->
<!--{{ serverRenderingData.body }} --> 

<script src="<%= htmlWebpackPlugin.files.chunks.app.entry %>"></script>
</body>
</html>

2(kinds of) files are generated :

template.html (HTML file)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>title</title>
</head>
<body>


<script src="//example.com/publicPath/app.bundle.js"></script>
</body>
</html>

template.js (CommonJS module to be required on Node)**

module.exports = function(serverRenderingData){
  return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>title</title>
    </head>
    <body>

    ${serverRenderingData.body}

    <script src="//example.com/publicPath/app.bundle.js"></script>
    </body>
    </html>
  `
};

Anyone has better practice? or any suggestion?

mc-zone on 24 Jan 2017

I'm :+1: with all those changes as you are following semver so the impact can be managed easily. Thank you for including us in the discussion!

JSteunou on 24 Jan 2017

Switch to ava

jest?

spuf on 24 Jan 2017

thanks for all your feedback 👍

@spuf ava has build in support for async even for node 4 - any reasons to use jest instead?
@mc-zone this is already possible (in a way) since 2.0 - feel free to open a issue / stack overflow question
@SimenB yes - I guess it would be appropriate to drop bluebird
@TheLarkInn open for a discussion in slack
@SpaceK33z thanks - help is always appreciated

jantimon on 25 Jan 2017

@TheLarkInn probably a separate topic to V3.0: https://github.com/ampedandwired/html-webpack-plugin/issues/565

graingert on 27 Jan 2017

Hi, if you choose to support multiple html files, can you ensure your events API supports this - don't know what mechanism you will choose but, e.g., ensure you pass through the entry point for that html file.
(To be honest, the current approach where you have a separate instance for each page might appear clunky but actually works quite well alongside separate instances of related plugins such as ExtractText etc).

numical on 29 Jan 2017

@numical I'll try to keep it in my mind ;)

jantimon on 29 Jan 2017

WRT generating multiple files: I'm working with a static site generator (metalsmith) and using html-webpack-plugin to generate injected assets. However, because pages can be added or removed at "devtime", the plugin does not pick up these new files, requiring a full rebuild just to pick up the new file.

Not sure what can be done here, but just chipping in. A single instance of the plugin that takes a glob and watches for changes may justify it as an enhancement.

darylteo on 1 Feb 2017

+1 waiting for entrypoints and several files. Good for building multipage applications!

Disorrder on 21 Feb 2017

If you are looking for a workaround for the whole multipage I have something that wraps this plugin github.com/mutualofomaha/multipage-webpack-plugin that might help

TheLarkInn on 21 Feb 2017

👍2

removing chunkSortMode is generally going to be a BadIdea(tm). stats.entrypoints is rarely in the order some people may want... I know it definitely won't be in my case.

I'm currently having to use this snippet to make sure my bits are properly sorted: https://github.com/jantimon/html-webpack-plugin/issues/481#issuecomment-262414169

airtonix on 16 Mar 2017

👍1

please make dynamic entrypoints, for example:

const path = require('path');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {};

glob.sync(`${basePath}/src/layouts/*.?(pug|jade)`).forEach((item) => {
  config.plugins.push(
    new HtmlWebpackPlugin({
      filename: `${path.basename(item, path.extname(item))}.html`,
      template: item
    })
});

module.exports = config;