html-webpack-multi-build-plugin
html-webpack-multi-build-plugin copied to clipboard
firsttris
one bundle is missing sometimes
sometimes when we do builds, either the modern or the legacy bundle is missing.
in index.html there is just and empty script tage like this
not quite sure why this happens.
is this because the plugin is using an async tab?
if you have an idea please reply
regards Tristan
Hey just following up here. This was the output of my latest attempt.
<!DOCTYPE html>
<html>
<head>
<title>Webpack App</title>
</head>
<body>
<script type="module">
</script>
<script nomodule>
var script0 = document.createElement('script');
script0.type = 'text/javascript';
script0.src = 'index_legacy.js';
document.body.appendChild(script0);
</script>
<script type="text/javascript" src="index_legacy.js"></script></body>
</html>
It looks like this.js is not persisting through the lifecycle of the plugin. It's being created fresh each time beforeHtmlGeneration is being called.
I'm not entirely sure of the correct solution here. I'm not all that familiar with webpack plugins. I'll see if I can take a closer look soon.
Code for reference: https://github.com/johnstew/differential-serving/pull/2
It's look crazy, sometime build work fine, but most of time i got just
<script type="module"></script>
<script nomodule></script>
=(
@Akiyamka have you noticed any improvement / decline from version 1.1.0 in comperence to 1.0.0 ?
@firsttris html-webpack-plugin-before-html-generation hook run twice and generate index.html twice - empty and filled version. (I see it in log)
If webpaсk run builds in parallel is a matter of luck which of them will be written in dist last
So I found next workaround for that issue -
in first build config i change filename option to 'delete_me.html' and use ignore-emit-webpack-plugin for ignore that file in emit stage.
{
plugins: [
new htmlWebpackPlugin({
inject: !multiBuildMode,
template,
filename: '__delete_me__.html',
}),
new IgnoreEmitPlugin('__delete_me__.html'),
new htmlWebpackMultiBuildPlugin()
]
}
Now index.html is generated as needed
@Akiyamka well done. good catch. So the Issue is because it's executed twice and one is empty. i will add this to the doc's.
We are having some problems with the plugin too. Sometimes it put only the output of one of the configs used. Any help that you could provide will be welcome
I think that I have an overview idea about what's happening and I have a fix proposal in order to avoid this. It is as you said caused by a twice execution of the html-webpack execution. Which is colliding one vs each other trying to write the file (if is called with the same name). I'll post a fix proposal based into only take into account the last beforeHtmlCreation to call the cb method.
First of all I'm not so experienced with webpack plugins but... makes sense to do something like that?
beforeHtmlGeneration: function(data, cb) {
this.js = this.js.concat(data.assets.js);
data.assets.js = this.js;
data.plugin.options.modernScripts = this.js.filter((value) => value.indexOf('legacy') === -1);
data.plugin.options.legacyScripts = this.js.filter((value) => value.indexOf('legacy') > 0);
!this.firstTime ? cb(null, data) : (this.FirstTime = false);
},
which will be the affectations of not call the cb method on first execution of the plugin? I've tested it and seem to work well but... As I said I'm not an expert about webpack plugins under the hood
i really don't now. probably my xp with webpack plugins is not better then yours, or even worse
if your fix works it would be a nice solution.
first question which came to my mind: is "this" still existing event if its executed twice?
if this fixes the build issue i would be happy to add this code...
any updates on this? Since I updated to the latest versions of webpack and the html plugins all bundles are missing on every build
