@snowpack/plugin-webpack expects HTML files

[KonnorRogers]

When using @snowpack/plugin-webpack, it expects there to be HTML files, however, when using @snowpack/plugin-parcel I run into no issues.

I'm assuming the issue is due to how the plugin transform javascript file names in the HTML files. It seems like this plugin is meant for SPAs in mind.

For reference, I'm building snowpacker (a Rails integration with Snowpack) and looking to use a Bundler for production.

[FredKSchott]

Hey! Following up from our Twitter convo, this was the bundler issue you were talking about? I just got rails running in your example app, so that I have something to play around with.

So the way our current build pipeline works is:

1. every source file is built 1:1 from source to a destination directory.
2. If an "optimize" plugin like "@snowpack/plugin-webpack" is included, it optimizes the entire destination directory.

We expect that what you build into your destination directory is a full static website, complete with HTML files. "@snowpack/plugin-webpack" scans that HTML to find your JS entrypoints, bundles those, and automatically updates the script tags to load those instead.

So we need two bits of info to recreate this webpack step without access to the HTML files:

1. What are your JS entrypoint files?
2. Where should the bundles be written to in the destination directory?
3. (maybe) how does snowpacker know where the bundles were written to?

@ParamagicDev any thoughts / are we on the right track here? I bet snowpacker can be responsible for sending the JS entrypoint files to the plugin via config, but then I'm not sure about how we tell snowpacker about the result / where the bundles were written to.

[FredKSchott]

Do you have any more info on the source manifest? It looks like Webpacker is using this plugin: https://github.com/danethurber/webpack-manifest-plugin/blob/1.x/README.md in the webpack build, and then reads it with https://github.com/rails/webpacker/blob/master/lib/webpacker/manifest.rb inside of webpacker itself to load the correct file.

In that case, our plan would be something like:

1. What are your JS entrypoint files? All files in directory:packs/*.js
2. Where should the bundles be written to in the destination directory?
   1. Same directory: The packs/ input files (packs/application.js) should be replaced with the bundled files in the final public build (packs/application-UNIQUEHASH.js).
   2. Alternatively: If we have a manifest, they could be written anywhere, like to a new directory: bundles/application-UNIQUEHASH.js.
3. How does snowpacker know the file names/paths of the new bundles? A manifest JSON file is written into the final build, which maps the original input files to their final bundled outputs.

It looks like webpacker uses "javascript_pack_tag" to load the bundled pack by name, instead of javascript_include_tag. Snowpacker would probably need to implement its own javascript_pack_tag which would loads packs/application.js during development and packs/application-BUNDLEDHASH.js in production.

[FredKSchott]

PS: this is a whole new world for me, and just my best guess. Please correct me if anything above feels wrong or "not the rails way" :)

[KonnorRogers]

@FredKSchott I already have the helpers in place for pack tags :) you are 100% on the money and summarized correctly how Webpacker works as far as my understanding.

Also heres the helper I have in place to help facilitate this:

https://github.com/ParamagicDev/snowpacker/blob/accf890a0b33888fa0f2a1aeba2d0937c80b8f2e/lib/snowpacker/helpers.rb#L26

Let me know if theres any other way I can help. I may just use this as a reason to dig into the new plugin API and make a rollup bundler...

[FredKSchott]

Haha nice! Looks like you're already almost there :)

ManifestPlugin

I think that adding ManifestPlugin makes sense for any app, so lets add that to the official @snowpack/plugin-webpack and then see how far that gets you.

Detect entrypoints without HTML

Passing as set of entrypoints: [filepath1, filepath2, ...] to the plugin config feels like something worth supporting as well. If that config is used, then the Snowpack plugin should skip everything related to scanning/updating HTML files and just bundle the entrypoints that you tell us too.

---

We can try to prioritize that work for later this week, but it would be awesome if you could take a stab at either of thoese (in our official webpack plugin or in your own bundler plugin).

[KonnorRogers]

This sounds reasonable, I'll take a look in the next couple of days and see what I can come up with.