vite-plugin-virtual-entry
vite's MPA needs html file for every entry which makes your project's looks chaotic.
And if you follow vite's MPA, put other file in other directory, unlike index.html, you need useless middle directory(Ex. from vite's MPA doc http://localhost:3000/nested/nested.html) to located it.
This plugin to make vite's MPA in serve and build have same behavior.
This plugin use vite's configureServer Hook to intercept html request and response the html content requested from browser.
This plugin intercept transform and generateBundle hooks of vite:build-html .
Note
- please DO NOT use this plugin in lib mode
Features
- no html file needed
- webpack entry like
- auto config
build.rollupOptions.input from entry
Usage
yarn add vite-plugin-virtual-entry --dev
// or
npm install vite-plugin-virtual-entry -D
Add it to vite.config.js
// vite.config.js
import virtualEntry from 'vite-plugin-virtual-entry'
// xxx.html | xxx.js(x) | xxx.ts(x)
type EntryFile = string;
type BaseEntry = EntryFile | {[EntryName: string]: EntryFile;};
type Entry = BaseEntry | BaseEntry[];
type RenderOption = {
html: string;
name: string;
entry: string;
};
type UserOption = {
entry?: Entry;
render?: Render;
index?: string;
};
// Case Entry As Object
const entryAsObject: Entry = {
// http://localhost:3000/page
// http://localhost:3000/page.html
page: "/src/index/index.js",
// http://localhost:3000/nested/page
// http://localhost:3000/nested/page.html
"nested/page": "/src/nested/page/index.js",
// http://localhost:3000/login
// http://localhost:3000/login.html
login: "/src/login/login.js",
};
// Case Entry As Object Array
const entryAsObjectArray: Entry[] = [entryAsObject];
// Case Entry As String
// http://localhost:3000/src/login/login
// http://localhost:3000/src/login/login.html
const entryAsString = "/src/login/login.js";
// Case Entry As String Array
// http://localhost:3000/src/login/login
// http://localhost:3000/src/login/login.html
const entryAsStringArray = ["/src/login/login.js"];
// optional
const render: UserOption['Render'] = ({ html, name, entry }) => {
/* You can replace or update HTML in your way.
alternately, by passing `entry`, you can use `ejs` to render your html and return it,eg:
var ejsHtml =`
<!DOCTYPE html>
<html>
<head></head>
<body><script type="module" src="<%= entry %>"></script></body>
</html>
`
return ejs.render(ejsHtml, { entry:entry })
*/
return html
};
const entry =
entryAsObject | entryAsObjectArray | entryAsStringArray | entryAsString;
export default {
plugins: [virtualEntry({ entry, render }:UserOption)],
};
Index (index.html)
if don't have index.html in your project root, it will render same as 404
404
Plugin will intercept request, if the requested path does not exist , plugin will send something like below to browser
http://localhost:3000/index
http://localhost:3000/nested/Page
http://localhost:3000/login
Further Info
vite-plugin-mpa
vite-plugin-multipage
vite-plugin-html-template
vite-plugin-virtual-html
@rollup/plugin-virtual
