0

I have the following project structure

/
-- dest/
-- public/
---- widget.html
-- src/
---- runner.ts
---- runner.scss
---- widget/
------ components/
-------- ComponentA.vue
-------- ComponentB.vue
------ App.vue
------ widget.ts

my goal is to:

  1. bundle the Vue app under src/widget -> dest/widget using public/widget.html as theentry`
  2. bundle src/runner.ts -> dest/runner.js
  3. bundle src/runner.scss -> dest/runner.css

I will load runner.js on my site ( header of footer ). runner.js will create an iframe and load dest/widget.html into the iframe source, which will in turn load the app inside the iframe. runner.js will also load runner.css and inject it into the page ( dynamically, outside of the bundling flow )

problems:

  1. since Parcel is forcing file hashes, i do not understand how runner.ts can reference the widget.html if the hash keeps changing
  2. can i do this entire set of requirement in a single bundler / config?

I understand these are rather unusual requirement but this is what the app needs to do and this is what needs to happen, I just need help to find the solution to achieve this in the right way without hacking or doing crazy stuff :)

Assaf Moldavsky
  • 1,681
  • 1
  • 19
  • 30
  • Hashes should be applied to `js` and `css`, `html` file should be left alone – ljubadr Jan 24 '19 at 04:21
  • 1
    I'm not sure if what you are trying to do is simply have two files `runner.js` and `runner.css` without the file name hashes -- but if this is what you want, try *not* using the widget.html page as an entrypoint. Rather skip the use of the html file and use the *javascript* file as the entrypoint. In this way you will get just those two files and no hash in the filename. I don't need an index.html in my setup, I'm using Ruby/Rails and just want to get the js bundle without hashes in the filename so this is what I do. Try a command similar to: `parcel src/runner.js` – FireDragon Mar 05 '19 at 22:07

0 Answers0