support html-webpack-plugin@4

[Austaras]

(node:13342) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'tapPromise' of undefined
    at compiler.hooks.compilation.tap (node_modules/webpack-babel-multi-target-plugin/src/babel.multi.target.html.updater.ts:112:59)

[Austaras]

well, this is solved after use stable version of HtmlWebpackPlugin, but I believe a detailed explanation will be interesting and helpful for me and other people who encountered this problem

[DanielSchaffer]

html-webpack-plugin@4 is still in beta ... I'll start looking into this after I can resolve other higher priority issues.

[erezvish]

Hi,
just encountered this issue and since downgrading to the stable version of html-webpack-plugin is not an option for me, I was wondering if perhaps if this issue had a chance to move up the chain of priorities.

[Austaras]

@erezvish I'm a bit occupied lately so you may pr it yourself. You can check this as a reference

[erezvish]

I'd be happy to try and take a stab at it, but to be honest I'm not entirely sure how start.
Are there contributing guidelines somewhere? how to get this up, running, and debug?

[DanielSchaffer]

@erezvish there aren't yet, sorry about that. As for setting up locally:

• running yarn setup should install all dependencies for the plugin and the examples
• There are notes for building and running the example projects in the README
• You can debug the plugin directly from your IDE by pointing it at a specific example project:

node parameters: --require ts-node/register
working directory: (path to your local repo copy, e.g. ~/webpack-babel-multi-target-plugin)
javascript file: examples/build.js
app parameters: (directory name of example project, e.g. es6-dynamic-import)
env variables: TS_NODE_PROJECT=tsconfig.ts-node.json;TS_NODE_FILES=true

For a concrete example, this is what my debug configuration looks like for WebStorm:

From there, you should be able to just set breakpoints in either the plugin's source code, or even Webpack's js source code in node_modules.

The HtmlWebpackPlugin stuff is (IIRC) all relegated to BabelMultiTargetHtmlUpdater, in the file ./src/babel.multi.target.html.updater.ts. Please make sure that your solution is backwards compatible with v3, of course.

In order to test/debug v4 separately from v3, it will probably be helpful to add a new example. I'd recommend just cloning one of the simpler examples (e.g. es6-dynamic-import) and using v4 with that. My workflow in these circumstances is pretty exploratory - I generally start debugging, find where it's throwing, and make it ... not throw.

Unfortunately, I haven't set up much in the way of unit tests, as it's tricky to design meaningful unit tests based on the outcome of a compilation process. The examples sort of act as my test cases here - each them needs to:

• start their "app" without error
• display title text
• display a welcome message
• display "good to go" status text
• turn the background green after startup
• register a click handler, and add elements to the UI in response to clicks on any element
• additional use cases, depending on the example (e.g. the angular routing example has additional route navigation requirements)

You can see the standard e2e test suite in ./examples/standard.e2e-spec.ts. I've got it set up to run through BrowserStack, but unfortunately, I'm not sure if others have the right authentication to run the tests through them.

Let me know if you have any other questions about the project setup. Good luck!