vite-plugin-generate-html v0.2.1

Vite Plugin Generate HTML

Define separate output files for JS and CSS bundles. Plugin will generate <script> and <link> elements from entry files and copy elements to defined output files. \ \ This plugin is useful for bundles that include a hash in the filename which changes in every compilation, and if you have several different views in which you want to include those JS- and CSS-bundles.\ Output file can have any file extension: .html, .cshtml (Razor), .php etc.\ The source of inspiration for this plugin is the Webpack's HtmlWebpackPlugin.

Install

Install the package from npm.

npm install --save-dev vite-plugin-generate-html

Parameters object

{
  /**
   * Directory to serve as plain static assets.
   * @default "/dist/"
   */
  publicDir?: string;

  /**
   * The file to write the generated script HTML to.
   */
  jsEntryFile: string;

  /**
   * The file to write the generated link HTML to.
   */
  cssEntryFile: string;

  /**
   * Custom script and link element attributes for application's entry points. 
   * Entry point name must match those defined in configs.
   * E.g. if your application's default main entry point is "main.ts" you must pass "main" as an entry point name for output.
   * 
   * If output is used, you must define all entry points to it, unless you filter them by using the chunks-parameter.
   * If output is left empty default attributes for script and link elements are used.
   * Script element default attributes: ['type="module"']
   * Link element default attributes: ['media="all"']
   * 
   * @default = []
   * @example
   * output: [
   *  {
   *    main: {
   *      attrs: ['type="module"', 'data-foo="bar"'],
   *      linkAttrs: ['media="all"']
   *    },
   *    ....
   *  }
   * ]
   */
   output?: Array<
    Record<
      string,
      {
        /**
         * Attributes provided for the generated bundle script element. Passed as an array of strings.
         */
        attrs: string[];

        /**
         * Attributes provided for the generated link element. Passed as an array of strings.
         */
        linkAttrs: string[];
      }
    >
  >;

  /**
   * By default the plugin will handle all chunks that are defined as entry points,
   * but you can also limit it to handle only certain ones.
   * This allows to reuse the plugin and define different output paths for some other entries.
   * @default = []
   * @example
   * chunks: ["app", "otherEntry"]
   */
  chunks?: string[]
}

Basic usage

Import your main entry css in application's main entry file (e.g. main.ts)

import "sass/styles.scss";

// Other entry related code
import { createApp } from "vue";

const app = createApp({});

app.mount("#app");

Bundles are generated based on your applications entry points so you need to have at least one entry defined. \ You can change the bundles output loading order by changing the order in rollupOptions.input.\ Add the plugin to plugins array.

// vite.config.ts
import { resolve as pathResolve } from "path";
import { defineConfig } from "vite";
import VitePluginGenerateHtmlFiles from "vite-plugin-generate-html";

export default defineConfig({
  // ...other config options
  build: {
    rollupOptions: {
      input: {
        app: pathResolve(__dirname, "src/main.ts")
        // otherEntry: pathResolve(__dirname, "src/other_entry.ts")
      }
    }
  },
  plugins: [
    VitePluginGenerateHtmlFiles({
      publicDir: "/dist/",
      jsEntryFile: pathResolve(__dirname, "../some/dir/for/javascript.html"),
      cssEntryFile: pathResolve(__dirname, "../some/dir/for/css.html")
    }
    // Reuse the plugin for some other entry with custom output options:
    // 
    // VitePluginGenerateHtmlFiles({
    //   publicDir: "/dist/",
    //   jsEntryFile: pathResolve(__dirname, "../some/dir/for/another-javascript.html"),
    //   cssEntryFile: pathResolve(__dirname, "../some/dir/for/another-css.html")
    //   output: [
    //     {
    //       otherEntry: {
    //         attrs: ['type="module"', 'data-foo="bar"'],
    //         linkAttrs: ['media="all"']
    //       }
    //     }
    //   ],
    //   chunks: ["otherEntry"]
    // }
  ]
)}

This will generate following files (ending part after /dist/ may be different depending on other config settings in your app):

javascript.html

<script type="module" src="/dist/app.[hash].js"></script>

css.html

<link href="/dist/main.[hash].css" rel="stylesheet" media="all" />

Note: plugin will override contents in the defined files.

License

MIT