refactor(bundler-vite): use temp index.html as entry point

Author: meteorlxy

packages/@vuepress/bundler-vite/src/plugin/createMainPlugin.ts

@@ -0,0 +1,124 @@
+import type { Plugin } from 'vite'
+import type { App } from '@vuepress/core'
+import { fs } from '@vuepress/utils'
+import type { ViteBundlerOptions } from '../types'
+import { resolveAlias } from './resolveAlias'
+import { resolveDefine } from './resolveDefine'
+
+// packages that include client code, which should not
+// be optimized nor externalized
+const clientPackages = [
+  '@vuepress/client',
+  '@vuepress/plugin-active-header-links',
+  '@vuepress/plugin-back-to-top',
+  '@vuepress/plugin-container',
+  '@vuepress/plugin-debug',
+  '@vuepress/plugin-docsearch',
+  '@vuepress/plugin-git',
+  '@vuepress/plugin-google-analytics',
+  '@vuepress/plugin-medium-zoom',
+  '@vuepress/plugin-nprogress',
+  '@vuepress/plugin-palette',
+  '@vuepress/plugin-prismjs',
+  '@vuepress/plugin-pwa',
+  '@vuepress/plugin-pwa-popup',
+  '@vuepress/plugin-register-components',
+  '@vuepress/plugin-search',
+  '@vuepress/plugin-shiki',
+  '@vuepress/plugin-theme-data',
+  '@vuepress/plugin-toc',
+  '@vuepress/theme-default',
+]
+
+export const createMainPlugin = ({
+  app,
+  options,
+  isServer,
+  isBuild,
+}: {
+  app: App
+  options: ViteBundlerOptions
+  isServer: boolean
+  isBuild: boolean
+}): Plugin => ({
+  name: 'vuepress:main',
+
+  config: async () => {
+    // create a temp index.html as dev entry point
+    if (!isBuild) {
+      await app.writeTemp(
+        'vite-root/index.html',
+        fs
+          .readFileSync(app.options.templateDev)
+          .toString()
+          .replace(
+            /<\/body>/,
+            `\
+<script type="module">
+import '@vuepress/client/lib/app.js'
+</script>
+</body>`
+          )
+      )
+    }
+
+    return {
+      root: app.dir.temp('vite-root'),
+      base: app.options.base,
+      mode: isBuild ? 'production' : 'development',
+      define: await resolveDefine({ app, isServer }),
+      publicDir: app.dir.public(),
+      cacheDir: app.dir.cache(),
+      resolve: {
+        alias: await resolveAlias({ app }),
+      },
+      css: {
+        postcss: {
+          plugins: isServer
+            ? []
+            : [
+                require('autoprefixer'),
+                ...(isBuild ? [require('postcss-csso')] : []),
+              ],
+        },
+      },
+      server: {
+        host: app.options.host,
+        port: app.options.port,
+        open: app.options.open,
+        // TODO: remove after https://github.com/vitejs/vite/issues/3373 is solved
+        fsServe: {
+          root: process.cwd(),
+        },
+      },
+      build: {
+        ssr: isServer,
+        outDir: isServer ? app.dir.dest('.server') : app.dir.dest(),
+        cssCodeSplit: false,
+        rollupOptions: {
+          input: app.dir.client('lib/app.js'),
+          preserveEntrySignatures: 'allow-extension',
+        },
+        minify: isServer ? false : !app.env.isDebug,
+      },
+      optimizeDeps: {
+        include: ['@vuepress/shared'],
+        exclude: clientPackages,
+      },
+      ssr: {
+        noExternal: clientPackages,
+      },
+    }
+  },
+
+  generateBundle(_, bundle) {
+    // delete all asset outputs in server build
+    if (isServer) {
+      Object.keys(bundle).forEach((key) => {
+        if (bundle[key].type === 'asset') {
+          delete bundle[key]
+        }
+      })
+    }
+  },
+})

packages/@vuepress/bundler-vite/src/plugin/createPlugin.ts

@@ -3,7 +3,7 @@ import createVuePlugin from '@vitejs/plugin-vue'
 import type { App } from '@vuepress/core'
 import type { ViteBundlerOptions } from '../types'
 import { createConstantsReplacementPlugin } from './createConstantsReplacementPlugin'
-import { createVuepressPlugin } from './createVuepressPlugin'
+import { createMainPlugin } from './createMainPlugin'
 import { createWorkaroundPlugin } from './createWorkaroundPlugin'
 
 export const createPlugin = ({
@@ -17,9 +17,12 @@ export const createPlugin = ({
   isServer: boolean
   isBuild: boolean
 }): Plugin[] => [
-  createConstantsReplacementPlugin(app),
+  // official vue plugin
   createVuePlugin(options.vuePluginOptions),
-  createVuepressPlugin({
+
+  // vuepress custom plugin
+  createConstantsReplacementPlugin(app),
+  createMainPlugin({
     app,
     options,
     isServer,

packages/@vuepress/bundler-vite/src/plugin/createVuepressPlugin.ts

@@ -1,10 +1,10 @@
 import type { Plugin, ViteDevServer, DepOptimizationMetadata } from 'vite'
 
 /**
- * Workaround for https://github.com/vitejs/vite/issues/2503
+ * Vite will inject version hash into file queries, which does not work
+ * well with VuePress.
  *
- * Although the issue was closed in vite 2.3.0, there are still
- * some problems with the version hash
+ * As a workaround, we remove the version hash to avoid the injection.
  */
 export const createWorkaroundPlugin = (): Plugin => {
   let server: