[Feature] Use html as start point for bundling #31

jogibear9988 · 2020-02-22T12:58:13Z

Would this be possible?

So that also both script tag types are supported (type=module and standard globals ones)

evanw · 2020-05-07T10:47:42Z

Just realized I haven't commented on this yet. I think this could be a cool feature, but I assume that most people who want to do this would also need CSS bundling to work too. So I'm considering this as being blocked by #20.

talentlessguy · 2020-05-15T22:31:11Z

I think it can be achieved by parsing html file and finding a script tag. And then using it as an input file, so:

esbuild < input.js

and

<script src="index.js"></script>

might work the same.

probably it is better to write a custom loader for it?

I know that the feature is blocked by CSS bundling but I had some thoughts about implementing the feature of html as input file

jogibear9988 · 2020-11-03T18:00:04Z

I think it can be achieved by parsing html file and finding a script tag. And then using it as an input file, so:
esbuild < input.js
and
<script src="index.js"></script>
might work the same.

probably it is better to write a custom loader for it?

I know that the feature is blocked by CSS bundling but I had some thoughts about implementing the feature of html as input file

but there could be more script files, and also inlined scripts.

talentlessguy · 2020-11-03T19:12:52Z

I think it can be achieved by parsing html file and finding a script tag. And then using it as an input file, so:
esbuild < input.js
and
<script src="index.js"></script>
might work the same.
probably it is better to write a custom loader for it?
I know that the feature is blocked by CSS bundling but I had some thoughts about implementing the feature of html as input file
but there could be more script files, and also inlined scripts.

well, in that case, we could collect all of the scripts and parse inline scripts the same way as esbuild --bundle

FredKSchott · 2020-12-02T04:55:23Z

+1 for this use-case. To give some context: Snowpack's new built-in optimize/bundle step is internally powered by esbuild. Snowpack supports HTML files as bundle entrypoints by scanning them for all script tags and then passing those JS files to esbuild as the entrypoints to bundle. For this to work properly, inline scripts have to be extracted into separate files and then linlined back in at the end. Hashed entrypoint filenames will introduce some additional relinking work for remote scripts as well.

This workaround is workable, but it would be great if everyone didn't need to do this, and esbuild could handle this use-case either natively or via plugin.

osdevisnot · 2020-12-02T07:23:50Z

For this to work properly, inline scripts have to be extracted into separate files and then linlined back in at the end

Can we not use esbuild's transform API as opposed to build API for this use case?

Just FYI, I was playing around with this a little with https://github.com/osdevisnot/sorvor

nojvek · 2021-04-03T00:01:13Z

One big thing I really like about parcel is I can do parcel bundle index.html or parcel serve index.html.

The html file could be something like

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="favicon.ico" />
    <title>A HTML Page</title>
    <script src="./src/index.tsx" defer></script>
  </head>
  <body class="bg-gray-100">
    <div id="root"></div>
  </body>
</html>

Parcel is smart enough to know favicon.ico needs to be copied, ./src/index.tsx is an entry point, and within index.tsx the scss/css file is also emitted.

import React from 'react';
import {render} from 'react-dom';
import {App} from './App';
import './App.scss';

render(<App />, document.getElementById('root'));

and outputted as

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <title>A HTML Page</title>
    <script src="app.js" defer></script>
    <link rel="stylesheet" href="app.css">
  </head>
  <body class="bg-gray-100">
    <div id="root"></div>
  </body>
</html>

Directory structure of build dir

index.html
app.css
app.css.map
app.js
app.js.map
favicon.ico

esbuild doing simple html parsing into entrypoints would really make it extra nice.

95% of SPA projects could really be simplified with something like this esbuild --bundle index.html --out-dir=build 💥

I'm happy to proof-of-concept this out in a PR. @evanw do you think you'd accept such a direction ?

edoardocavazza · 2021-04-16T09:09:30Z

Hello! We just released a plugin for esbuild that handles html files as entry point, you can find it here. It's still a work in progress but a if you would try it, any feedback is welcome! Feel free to file any issue too!

Prinzhorn · 2021-04-17T08:53:03Z

One important aspect of pointing Parcel to an index.html is cache busting. It will turn my js/index.js into sth. like js.00a46daa.js and rewrite the HTML. Same with favicon.21b6e204.ico etc. The example above is missing that.

zaydek · 2021-04-17T10:33:13Z

@Prinzhorn You’re on the money. This is definitely one of the features I’m most looking forward to. Second would be CSS tree-shaking (not even sure how that would get implemented), but HTML entry points would be amazing.

LifeIsStrange · 2021-10-14T12:33:12Z

If we talk about the same thing, this is the oldest open issue of Webpack
webpack/webpack#536
Their discussion might be interesting also there are some plugin based solutions apparently

wmertens · 2022-06-03T10:04:08Z

given that there's @edoardocavazza's plugin that does this, does it still make sense to have this issue here?

bedax · 2022-06-12T21:34:04Z

the main benefit would be for those of us who only use the command line, for which the plugin api isn't available

hunterloftis · 2022-07-07T21:07:29Z

Additionally, the plugin mentioned above by @edoardocavazza (https://www.npmjs.com/package/@chialab/esbuild-plugin-html) is limited to a single html entrypoint.

If esbuild supports html entrypoints, I hope it doesn't special-case that into "a single html entrypoint." That limits its usefulness to purely-single-page apps (vs multiple rich, bundled pages).

AliMD · 2023-01-17T09:03:30Z

@evanw
I strongly agree that your focus should be on JS/CSS for now.
But a simple code example for using meta and replacement outfile with hash in html would be very useful and would avoid creating weird solutions and writing dirty plugins like other build enviroments.
I think one afternoon is enough to write it, but it has a great impact in giving the audience an idea for the best solution.
Thank you in advance

maartenst · 2023-02-03T14:03:32Z

the plugin from @edoardocavazza needs some fixes and then it can support multiple entry points. I've hacked it together myself and opened an incident to ask for a cleaner solution: chialab/rna#128

silvenon · 2023-09-07T15:24:12Z

Parcel didn't work out well for me, also, the server hadn't been reloading when I was making changes, which was the main reason why I was trying it out. It didn't seem as stable as I hoped.

@edoardocavazza's plugin is now very advanced and definitely an interesting reference for writing esbuild plugins in general. It doesn't fit my needs because it's doing too much, so I'm using it as a reference to write my own project-specific HTML plugin that will do only what I need.

But it's quite confusing, the plugin needs to run a separate build for detected assets, which should then be rebuilt on each change, and somehow also cause the development server to reload… Challenging, but hopefully I'll get there one day.

mebest100 · 2023-10-05T10:35:27Z

@jogibear9988

using the html-bundler-webpack-plugin is possible to use html as start point for bundling.

Please see my comment in the Use a HTML file as an entry point.

@jogibear9988 Hi, you mean html-bundler-webpack-plugin can also apply into esbuild config?

webdiscus · 2023-10-05T10:40:41Z

you mean html-bundler-webpack-plugin can also apply into esbuild config?

no, sorry. It was an example how it works in webpack via the plugin.

mebest100 · 2023-10-05T10:49:46Z

you mean html-bundler-webpack-plugin can also apply into esbuild config?

no, sorry. It was an example how it works in webpack via the plugin.
Ok, does esbuild have similar html plugin as html-webpack-plugin which can auto render index.html template and fill in with built js/css? Thx!

silvenon · 2023-10-05T23:36:07Z

Ok, does esbuild have similar html plugin as html-webpack-plugin which can auto render index.html template and fill in with built js/css? Thx!

Not that I'm aware of, but you can hack your own. meta needs to be set to true because the metafile data will contain the output paths that you can use to inject asset tags into your HTML. The plugin should use the onEnd callback, that's when the metafile data gets populated.

I used chokidar to watch the HTML file and trigger esbuild to rebuild.

silvenon · 2023-10-05T23:43:57Z

Actually, @chialab/esbuild-plugin-html seems to work this way. It didn't fit my needs, but it might yours.

sdavids · 2023-11-04T04:59:04Z

The HTML entry point should also support import maps.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

index.html

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="import map support" />
    <title>import map support</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script type="importmap">
      {
        "imports": {
          "lib": "/j/lib.mjs",
        }
      }
    </script>
    <link
      rel="modulepreload"
      href="j/app.mjs"
      as="script"
      crossorigin="anonymous"
    />
    <link
      rel="icon"
      href="data:image/x-icon;base64,"
      type="image/x-icon"
      sizes="any"
    />
  </head>
  <body>
    <main>
      <h1>import map support</h1>
    </main>
    <script type="module" src="j/app.mjs"></script>
  </body>
</html>

j/app.mjs

import { test } from 'lib'


test();

j/lib.mjs

export test = () => console.log('test');

evanw mentioned this issue May 9, 2020

Inject script tag into html after bundling (using with React) #96

Closed

milesfrain mentioned this issue Jun 22, 2020

Attempt to use multi-repo support via pnpm to install npm dependencies to each recipe if they use it JordanMartinez/purescript-cookbook#69

Closed

evanw changed the title ~~[Feature] Use index.html as start point for bundling~~ [Feature] Use html as start point for bundling Oct 3, 2020

This was referenced Oct 3, 2020

[Proposal] Html as entry point #419

Closed

Can't esbuild multiple files unless I use unix find #424

Closed

evanw mentioned this issue Nov 24, 2021

Can I build index.ts to single html file? #1800

Closed

evanw mentioned this issue Feb 8, 2022

What is the recommended pattern to achieve the same behavior as the HtmlWebpackPlugin ? Add hash named assets to the index.html file #1995

Closed

evanw mentioned this issue Dec 4, 2022

Move index.html from src to dist folder #1771

Closed

evanw mentioned this issue Jan 13, 2023

Feature Request: Emit path of CSS bundle to default export #2817

Open

wbccb mentioned this issue Mar 26, 2023

【基础】esbuild使用详解 wbccb/Frontend-Articles#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature] Use html as start point for bundling #31

[Feature] Use html as start point for bundling #31

jogibear9988 commented Feb 22, 2020

evanw commented May 7, 2020

talentlessguy commented May 15, 2020 •

edited

jogibear9988 commented Nov 3, 2020

talentlessguy commented Nov 3, 2020

FredKSchott commented Dec 2, 2020

osdevisnot commented Dec 2, 2020

nojvek commented Apr 3, 2021 •

edited

edoardocavazza commented Apr 16, 2021

Prinzhorn commented Apr 17, 2021 •

edited

zaydek commented Apr 17, 2021

LifeIsStrange commented Oct 14, 2021 •

edited

wmertens commented Jun 3, 2022

bedax commented Jun 12, 2022

hunterloftis commented Jul 7, 2022

AliMD commented Jan 17, 2023 •

edited

maartenst commented Feb 3, 2023

silvenon commented Sep 7, 2023 •

edited

mebest100 commented Oct 5, 2023

webdiscus commented Oct 5, 2023

mebest100 commented Oct 5, 2023

silvenon commented Oct 5, 2023

silvenon commented Oct 5, 2023

sdavids commented Nov 4, 2023

[Feature] Use html as start point for bundling #31

[Feature] Use html as start point for bundling #31

Comments

jogibear9988 commented Feb 22, 2020

evanw commented May 7, 2020

talentlessguy commented May 15, 2020 • edited

jogibear9988 commented Nov 3, 2020

talentlessguy commented Nov 3, 2020

FredKSchott commented Dec 2, 2020

osdevisnot commented Dec 2, 2020

nojvek commented Apr 3, 2021 • edited

edoardocavazza commented Apr 16, 2021

Prinzhorn commented Apr 17, 2021 • edited

zaydek commented Apr 17, 2021

LifeIsStrange commented Oct 14, 2021 • edited

wmertens commented Jun 3, 2022

bedax commented Jun 12, 2022

hunterloftis commented Jul 7, 2022

AliMD commented Jan 17, 2023 • edited

maartenst commented Feb 3, 2023

silvenon commented Sep 7, 2023 • edited

mebest100 commented Oct 5, 2023

webdiscus commented Oct 5, 2023

mebest100 commented Oct 5, 2023

silvenon commented Oct 5, 2023

silvenon commented Oct 5, 2023

sdavids commented Nov 4, 2023

talentlessguy commented May 15, 2020 •

edited

nojvek commented Apr 3, 2021 •

edited

Prinzhorn commented Apr 17, 2021 •

edited

LifeIsStrange commented Oct 14, 2021 •

edited

AliMD commented Jan 17, 2023 •

edited

silvenon commented Sep 7, 2023 •

edited