Support relative assets in a different directory #26

jasonwilliams · 2022-03-04T12:39:02Z

So my previous webpack config would generate something which looked like this. html-webpack-plugin

public
├── index.html (with links to the below embedded in)
└── ui-assets
    ├── assets-manifest.json
    ├── main.d2fe0910b8.js
    ├── main.d2fe0910b8.js.map
    ├── vendor.67dfc8f6a1.js
    └── vendor.67dfc8f6a1.js.map

This was useful to us because we didn't want the main entry point (index.html) to be hashed. it also allowed us to serve static assets from a different place.

Is it possible to have the same result with this plugin?

The text was updated successfully, but these errors were encountered:

craftamap · 2022-03-04T20:40:36Z

Hey there!

I think this should be possible by using esbuild's entry name (and it's sister asset name and chunk name) option.

Something like this should do the trick:

esbuild.build({
    entryPoints: ['src/index.js'],
    entryNames: "ui-assets/[name]-[hash]",
    chunkNames: "ui-assets/[name]-[hash]", // If needed
    assetNames: "ui-assets/[name]-[hash]", // If needed
    metafile: true,
    outdir: 'dist/',
    plugins: [
        htmlPlugin({
            files: [
                {
                    entryPoints: [
                        'src/index.js',
                    ],
                    filename: 'index.html',
                    htmlTemplate: `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            </head>
            <body>
                <div id="root">
                </div>
            </body>
            </html>
          `,
                },
            ]
        })
    ]
})

Does this work for you?

jasonwilliams · 2022-03-07T12:14:41Z

Thanks that works, although --serve seems to fail. Do you know if it's possible to support serve as we will need that for development.

When i use --serve i get a blank white screen, when looking in dev tools the js file has the same contents at the html file. so there's syntax errors.

Clicking ui-assets just refreshes the same directory listing.
I did also raise this the chialab version also but yours looks closer to working chialab/rna#44

craftamap · 2022-03-07T20:10:33Z

Looks like using serve is not possible right now, because of this bug.

Is anything preventing you from using watch: true instead of serve and starting the server by hand, e.G. using python -m http.server 8080?

jasonwilliams · 2022-03-07T22:54:16Z

@craftamap I think I’ll need to use watch with browsersync. Thanks.
Feel free to close this issue and I’ll keep an eye on that issue you linked

craftamap closed this as completed Mar 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support relative assets in a different directory #26

Support relative assets in a different directory #26

jasonwilliams commented Mar 4, 2022

craftamap commented Mar 4, 2022

jasonwilliams commented Mar 7, 2022 •

edited

Loading

craftamap commented Mar 7, 2022 •

edited

Loading

jasonwilliams commented Mar 7, 2022 •

edited

Loading

Support relative assets in a different directory #26

Support relative assets in a different directory #26

Comments

jasonwilliams commented Mar 4, 2022

craftamap commented Mar 4, 2022

jasonwilliams commented Mar 7, 2022 • edited Loading

craftamap commented Mar 7, 2022 • edited Loading

jasonwilliams commented Mar 7, 2022 • edited Loading

jasonwilliams commented Mar 7, 2022 •

edited

Loading

craftamap commented Mar 7, 2022 •

edited

Loading

jasonwilliams commented Mar 7, 2022 •

edited

Loading