package-build-stats
package-build-stats copied to clipboard
WIP: upgrade to Webpack 5
Addresses #33
I took a crack at upgrading, but I really don't know Webpack well, so I got stuck in a few places. Opening this PR in case a few of the things I got right make for a useful starting point.
Two things that are tricky:
- There is no type
webpack.Stats.ToJsonOutput
.webpack.Stats
is a class with atoJson()
method, but I don't see any types for it's output. There are JSON schema files, so maybe it's expected to consume one of those? I tried to use the JS interface withstats.compilation
, but I'm not sure if that's working yet. - I can't get the Vue loader to work. I get:
[VueLoaderPlugin Error] No matching use for vue-loader is found. Make sure the rule matching .vue files include vue-loader in its use.
- MemoryFS doesn't implement the OutputFilesystem interface correctly. I casted to
any
for now.
3. MemoryFS doesn't implement the OutputFilesystem interface correctly. I casted to
any
for now.
This is deprecated in favor of memfs
, which is a more complete memory filesystem.
- There is no type
webpack.Stats.ToJsonOutput
.webpack.Stats
is a class with atoJson()
method, but I don't see any types for it's output. There are JSON schema files, so maybe it's expected to consume one of those? I tried to use the JS interface withstats.compilation
, but I'm not sure if that's working yet.
The typings are a bit incomplete here, but the JSON data is mostly the same except for a few minor changes.
hey justin 👋
the vue stuff is broken because the svelte rule is matched by the vue plugin, which breaks the loop and never reaches the vue rule.
see here: https://github.com/vuejs/vue-loader/blob/a2b89d3c44011e9c8c4af523a8d7039d9b27705c/lib/plugin-webpack5.js#L58-L66
the plugin iterates through all the rules. for each rule, it tests it against foo.vue
and, if that fails, it tries foo.vue.html
. in our case, foo.vue.html
matches the svelte rule before the iteration has reached the vue rule.
switching them around might fix it but feels a bit delicate, easy to break again if someone isn't aware of this behaviour
i suppose really its a bug in vue-loader in that it shouldn't break the loop until it finds a vue-loader rule, if ever.
also the test fails for some unrelated error right now:
Error: Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks main and runtime)
Which also reveals that we have a problem here:
https://github.com/pastelsky/package-build-stats/blob/1077b785f996c203da276ca4e576eea0743e8e6c/src/utils/build.utils.ts#L194-L221
you can see at the bottom we check if (error && !stats)
, but if stats
was falsy then the toJson
call further up would throw and be uncaught. we should probably shuffle that around a bit so we're accounting for the fact stats
can be empty, rather than always calling toJson
regardless
- There is no type
webpack.Stats.ToJsonOutput
webpack.StatsCompilation
will do that.
3. MemoryFS doesn't implement the OutputFilesystem interface correctly. I casted to
any
for now.
That's fixed now
i can try pick this up if you don't have time @justinfagnani
@sokra webpack5 has its own types now i see, but it doesn't export quite a few of the interfaces it uses. for example, the changes justin has here need StatsAsset
which isn't an exported interface. ideally all types exposed on exported functions/classes/etc should also be exported i think
I definitely don't have time right now, so that'd be great @43081j !
I guess it'd be nice to file issues/PRs on Webpack to export the type interfaces needed here.
No worries, I'll have a go at finishing it off.
Also have opened a PR at definitelytyped to update the mini-css plugin so you don't have to cast it as any. Will see if I can get that done first