refactor(bundler-webpack): improve build dir structure and e2e scripts of webpack

Author: meteorlxy

e2e/package.json

@@ -5,15 +5,15 @@
   "type": "module",
   "scripts": {
     "docs:build": "vuepress build docs --clean-cache --clean-temp",
-    "docs:build-webpack": "cross-env E2E_BUNDLER=webpack pnpm docs:build",
+    "docs:build:webpack": "cross-env E2E_BUNDLER=webpack pnpm docs:build",
     "docs:clean": "rimraf docs/.vuepress/.temp docs/.vuepress/.cache docs/.vuepress/dist",
     "docs:dev": "vuepress dev docs --clean-cache --clean-temp",
-    "docs:dev-webpack": "cross-env E2E_BUNDLER=webpack pnpm docs:dev",
+    "docs:dev:webpack": "cross-env E2E_BUNDLER=webpack pnpm docs:dev",
     "docs:serve": "anywhere -s -h localhost -p 9080 -d docs/.vuepress/dist",
     "e2e:build": "cross-env E2E_COMMAND=build playwright test",
-    "e2e:build-webpack": "cross-env E2E_COMMAND=build E2E_BUNDLER=webpack playwright test",
+    "e2e:build:webpack": "cross-env E2E_COMMAND=build E2E_BUNDLER=webpack playwright test",
     "e2e:dev": "cross-env E2E_COMMAND=dev playwright test",
-    "e2e:dev-webpack": "cross-env E2E_COMMAND=dev E2E_BUNDLER=webpack playwright test"
+    "e2e:dev:webpack": "cross-env E2E_COMMAND=dev E2E_BUNDLER=webpack playwright test"
   },
   "dependencies": {
     "@vuepress-e2e/conditional-exports": "file:./modules/conditional-exports",

e2e/playwright.config.ts

@@ -2,7 +2,7 @@ import { defineConfig, devices } from '@playwright/test'
 import { BASE, BUNDLER, IS_CI, IS_DEV } from './utils/env'
 
 const COMMAND_PART1 = IS_DEV ? 'docs:dev' : 'docs:build'
-const COMMAND_PART2 = BUNDLER === 'vite' ? '' : `-${BUNDLER}`
+const COMMAND_PART2 = BUNDLER === 'vite' ? '' : `:${BUNDLER}`
 const COMMAND_PART3 = IS_DEV ? '' : ' && pnpm docs:serve'
 
 export default defineConfig({

package.json

@@ -18,6 +18,7 @@
     "release:version": "bumpp -r --execute=\"pnpm release:changelog\" --commit \"build: publish v%s\" --all",
     "test": "pnpm test:unit && pnpm test:e2e",
     "test:e2e": "pnpm --filter e2e e2e:dev && pnpm --filter e2e e2e:build",
+    "test:e2e:webpack": "pnpm --filter e2e e2e:dev:webpack && pnpm --filter e2e e2e:build:webpack",
     "test:unit": "vitest run",
     "test:unit:cov": "vitest run --coverage"
   },

packages/bundler-webpack/src/build/build.ts

@@ -18,7 +18,7 @@ import {
 import { createServerConfig } from './createServerConfig.js'
 import { renderPage } from './renderPage.js'
 import { resolveClientManifestMeta } from './resolveClientManifestMeta.js'
-import type { ClientManifest } from './ssr/index.js'
+import type { ClientManifest } from './types.js'
 
 const log = debug('vuepress:bundler-webpack/build')
 

packages/bundler-webpack/src/build/createClientConfig.ts

@@ -8,7 +8,7 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import type Config from 'webpack-5-chain'
 import { createClientBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
-import { createClientPlugin } from './ssr/index.js'
+import { createClientPlugin } from './createClientPlugin.js'
 
 const require = createRequire(import.meta.url)
 

packages/bundler-webpack/src/build/ssr/createClientPlugin.ts renamed to packages/bundler-webpack/src/build/createClientPlugin.ts

@@ -1,13 +1,10 @@
 import { fs } from '@vuepress/utils'
 import type { StatsModule, WebpackPluginInstance } from 'webpack'
-import { isCSS, isJS } from './utils.js'
+import type { ClientManifest } from './types.js'
 
-export interface ClientManifest {
-  all: string[]
-  initial: string[]
-  async: string[]
-  modules: Record<string, number[]>
-}
+const isJS = (file: string): boolean => /\.js(\?[^.]+)?$/.test(file)
+
+const isCSS = (file: string): boolean => /\.css(\?[^.]+)?$/.test(file)
 
 /**
  * Vuepress client plugin

packages/bundler-webpack/src/build/resolveClientManifestMeta.ts

@@ -1,6 +1,5 @@
 import { resolveFileMeta } from './resolveFileMeta.js'
-import type { ClientManifest } from './ssr/index.js'
-import type { FileMeta, ModuleFilesMetaMap } from './types.js'
+import type { ClientManifest, FileMeta, ModuleFilesMetaMap } from './types.js'
 
 /**
  * Resolve files meta from clientManifest

packages/bundler-webpack/src/build/ssr/index.ts

@@ -27,3 +27,13 @@ export type FileMetaType = '' | 'font' | 'image' | 'script' | 'style'
  * A "module request" to "client files meta" key-value map
  */
 export type ModuleFilesMetaMap = Record<string, FileMeta[]>
+
+/**
+ * Client manifest that collected from webpack stats
+ */
+export interface ClientManifest {
+  all: string[]
+  initial: string[]
+  async: string[]
+  modules: Record<string, number[]>
+}