refactor(bundler-webpack): use webpack internal types (#1565)

Author: Mister-Hope

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

@@ -1,6 +1,5 @@
 import { fs } from '@vuepress/utils'
-import type { WebpackPluginInstance } from 'webpack'
-import type { FnModules, StatsToJsonOutput } from '../../types.webpack.js'
+import type { StatsModule, WebpackPluginInstance } from 'webpack'
 import { isCSS, isJS } from './utils.js'
 
 export interface ClientManifest {
@@ -29,18 +28,20 @@ export const createClientPlugin = (
             modules = [],
             entrypoints = {},
             chunks = [],
-          }: StatsToJsonOutput = compilation
-            .getStats()
-            .toJson() as unknown as StatsToJsonOutput
+          } = compilation.getStats().toJson()
 
           // get all files
           const allFiles = assets.map((a) => a.name)
 
           // get initial entry files
-          const initialFiles = Object.keys(entrypoints)
-            .map((name) => entrypoints[name].assets.map((item) => item.name))
-            .reduce((assets, all) => all.concat(assets), [])
-            .filter((file) => isJS(file) || isCSS(file))
+          const initialFiles =
+            Object.keys(entrypoints)
+              .map(
+                (name) =>
+                  entrypoints[name].assets?.map((item) => item.name) ?? [],
+              )
+              .reduce((assets, all) => all.concat(assets), [])
+              .filter((file) => isJS(file) || isCSS(file)) ?? []
 
           // get files that should be loaded asynchronously
           // i.e. script and style files that are not included in the initial entry files
@@ -51,18 +52,19 @@ export const createClientPlugin = (
 
           // get asset modules
           const assetModules = modules.filter(
-            (m): m is FnModules & Required<Pick<FnModules, 'assets'>> =>
-              !!(m.assets && m.assets.length),
+            (m): m is StatsModule & Required<Pick<StatsModule, 'assets'>> =>
+              Boolean(m.assets?.length),
           )
 
           // get modules for client manifest
           const manifestModules: ClientManifest['modules'] = {}
 
-          const fileToIndex = (file: string): number => allFiles.indexOf(file)
+          const fileToIndex = (file: number | string): number =>
+            allFiles.indexOf(file.toString())
 
           modules.forEach((m) => {
             // ignore modules duplicated in multiple chunks
-            if (m.chunks.length !== 1) {
+            if (m.chunks?.length !== 1) {
               return
             }
 
@@ -75,21 +77,21 @@ export const createClientPlugin = (
 
             // remove appended hash of module identifier
             // which is the request string of the module
-            const request = m.identifier.replace(/\|\w+$/, '')
+            const request = m.identifier?.replace(/\|\w+$/, '')
 
             // get chunk files index
             const files = [...chunk.files.map(fileToIndex)]
 
             // find all asset modules associated with the same chunk
             assetModules.forEach((m) => {
-              if (m.chunks.some((id) => id === cid)) {
+              if (m.chunks?.some((id) => id === cid)) {
                 // get asset files
                 files.push(...m.assets.map(fileToIndex))
               }
             })
 
             // map the module request to files index
-            manifestModules[request] = files
+            if (request) manifestModules[request] = files
           })
 
           // generate client manifest json file

packages/bundler-webpack/src/types.ts

@@ -1,8 +1,10 @@
 import type { VueLoaderOptions } from 'vue-loader'
-import type { Configuration as WebpackConfiguration } from 'webpack'
+import type {
+  LoaderContext,
+  Configuration as WebpackConfiguration,
+} from 'webpack'
 import type WebpackChainConfig from 'webpack-chain'
 import type WebpackDevServer from 'webpack-dev-server'
-import type { LoaderContext } from './types.webpack.js'
 
 export type {
   VueLoaderOptions,
@@ -82,15 +84,18 @@ export interface LoaderOptions {
   webpackImporter?: boolean
   additionalData?:
     | string
-    | ((content: string, loaderContext: LoaderContext) => string)
+    | ((
+        content: string,
+        loaderContext: LoaderContext<Record<string, any>>,
+      ) => string)
 }
 
 /**
  * Common type for style pre-processor options
  */
 export type StylePreprocessorOptions<
   T extends Record<string, any> = Record<string, any>,
-> = T | ((loaderContext: LoaderContext) => TextDecodeOptions)
+> = T | ((loaderContext: LoaderContext<T>) => TextDecodeOptions)
 
 /**
  * Options for postcss-loader