CODEWITHSUNDEEP
rollupvite
Simon H
Simon H

Reputation: 21027

vite without hash in filename

I'm trying to compile a webcomponent based on the monaco editor (in a lit element context). Having tried a lot of options I now have got the result down to two files

My top priority is to get rid of the hash (abc123), but I would also like to get down to a single file with the js and css in. Thanks in advance

My config reads:

import { resolve } from "path";

export default defineConfig({
    base: "/",
    build: {
        rollupOptions: {
            input:
                // main: resolve(__dirname, "index.html"),
                resolve(__dirname, "src/rmx-monaco.ts"),

            output: {
                // Prevent vendor.js being created
                manualChunks: undefined,
                // chunkFileNames: "zzz-[name].js",
                // this got rid of the hash on style.css
                assetFileNames: "assets/[name].[ext]",
            },
        },
        // Prevent vendor.css being created
        cssCodeSplit: false,
        // prevent some warnings
        chunkSizeWarningLimit: 60000,
    },
});

My js entry files has these lines

import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import { languages } from "monaco-editor/esm/vs/editor/editor.api";
import styles from "monaco-editor/min/vs/editor/editor.main.css";

(I can add more if it would help)

Upvotes: 38

Views: 44699

Answers (5)

Kelvin
Kelvin

Reputation: 865

1x JS file, 1x CSS file

This variant of @JoyLab's answer worked for my use case

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        inlineDynamicImports : true,
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

Resulting build:

dist/
|-assets/
  |- index.css
  |- index.js
|-index.html

Upvotes: 3

Brandon Oldenhof
Brandon Oldenhof

Reputation: 170

Small addition to the answer provided by @joy-lab: You can customize the filename structure for individual files by using a callback. I had to remove the hashes only for the Fontawesome sprite files:

const fontawesomeFileNames = [
  "brands.svg",
  "sharp-solid.svg",
  "sharp-light.svg",
  "sharp-regular.svg",
  "solid.svg",
  "regular.svg",
  "light.svg",
  "duotone.svg",
  "thin.svg",
];

export default defineConfig({
  ...
  build: {
    rollupOptions: {
      output: {
       assetFileNames: function (file) {
        return fontawesomeFileNames.includes(file.name)
          ? `assets/[name].[ext]`
          : `assets/[name]-[hash].[ext]`;
        },
      }
    }
  }
})

This leaves hashes intact for all files except for files with names included in the fontawesomeFileNames array.

Upvotes: 8

Joy Lab
Joy Lab

Reputation: 1049

add this:

export default defineConfig({
  ...
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

Upvotes: 78

Matan D
Matan D

Reputation: 141

Long time passed but for future viewers who visit this thread, try this package for single bundled .html file using ViteJS: https://github.com/richardtallent/vite-plugin-singlefile

Upvotes: 3

Simon H
Simon H

Reputation: 21027

I needed to add output: {entryFileNames: "[name].js",...

Still working on getting a single file

Upvotes: 15

Related Questions