fix webpack-plugin

Author: lightyen

examples/webpack-demo/package.json

@@ -2,6 +2,7 @@
   "name": "webpack-demo",
   "private": true,
   "scripts": {
+    "start": "webpack serve --config webpack.dev.js",
     "build": "webpack --config webpack.config.js"
   },
   "devDependencies": {
@@ -11,8 +12,10 @@
     "@babel/preset-typescript": "7.16.7",
     "@babel/runtime": "7.16.7",
     "babel-loader": "8.2.3",
+    "html-webpack-plugin": "^5.5.0",
     "ts-paths-resolve-plugin": "../../packages/ts-paths-resolve-plugin",
     "webpack": "5.65.0",
-    "webpack-cli": "4.9.1"
+    "webpack-cli": "4.9.1",
+    "webpack-dev-server": "^4.7.4"
   }
 }

examples/webpack-demo/src/index.ts

@@ -1,2 +1,3 @@
 import { value } from "he"
 console.log(value)
+import "./test"

examples/webpack-demo/src/test.ts

@@ -0,0 +1,2 @@
+import { value } from "he"
+console.log(value)

examples/webpack-demo/src/tsconfig.json

@@ -6,7 +6,8 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "paths": {
-      "he": ["./hello"]
+      "he": ["./hello"],
+      "ro": ["./world"],
     }
   }
 }

examples/webpack-demo/src/world.ts

@@ -0,0 +1 @@
+export const value = 100

examples/webpack-demo/webpack.config.js renamed to examples/webpack-demo/webpack.dev.js

@@ -1,24 +1,33 @@
 const path = require("path")
 const glob = require("glob")
 const { TsPathsResolvePlugin } = require("ts-paths-resolve-plugin")
-
+const HtmlWebpackPlugin = require("html-webpack-plugin")
 const src = path.join(__dirname, "src")
+process.env.NODE_ENV = "development"
 
 /** @type {import("webpack").Configuration} */
 const config = {
-	mode: "production",
+	mode: "development",
+	devtool: "inline-source-map",
 	entry: glob.sync("index.*", { cwd: src }).map(i => path.join(src, i)),
 	output: {
 		path: path.join(__dirname, "build"),
 		filename: "js/[name].js?[fullhash]",
 		clean: true,
 	},
-	plugins: [
-		new TsPathsResolvePlugin({ tsConfigPath: "src/tsconfig.json" }),
-	],
 	module: {
 		rules: [{ test: /\.(j|t)s?/, loader: "babel-loader" }],
 	},
+	plugins: [new HtmlWebpackPlugin()],
+	resolve: {
+		extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+		plugins: [new TsPathsResolvePlugin({ tsConfigPath: "src/tsconfig.json", logLevel: "debug" })],
+	},
+	devServer: {
+		hot: true,
+		open: false,
+		historyApiFallback: true,
+	},
 }
 
 module.exports = config

packages/ts-paths-resolve-plugin/README.md

@@ -18,9 +18,9 @@ Configurate in `webpack.config.js`:
 const { TsPathsResolvePlugin } = require('ts-paths-resolve-plugin');
 
 module.exports = {
-  plugins: [new TsPathsResolvePlugin()],
   resolve: {
     extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+    plugins: [new TsPathsResolvePlugin()],
   }
 }
 ```

packages/ts-paths-resolve-plugin/index.ts

@@ -1,3 +1,4 @@
+import type { Resolver } from "enhanced-resolve"
 import fs from "fs"
 import ts from "typescript"
 import { convertLogLevel, createHandler, createLogger, LogFunc, LogLevel, RegisterOptions } from "typescript-paths"
@@ -15,8 +16,8 @@ interface Request {
 	descriptionFileRoot: string
 	descriptionFileData: unknown
 	relativePath: string
-	context: {
-		issuer: string
+	context?: {
+		issuer?: string
 	}
 }
 
@@ -37,36 +38,30 @@ export class TsPathsResolvePlugin {
 			falllback: moduleName => fs.existsSync(moduleName),
 		})
 	}
-	apply(compiler: Compiler) {
-		compiler.resolverFactory.hooks.resolver.for("normal").tap(PLUGIN_NAME, resolver => {
-			resolver.hooks.resolve.tapAsync(PLUGIN_NAME, (request, context, callback) => {
-				const innerRequest = request.request || request.path
-				if (!innerRequest || request.module === false) {
-					return callback()
-				}
-
-				const importer = (request as Request).context.issuer
-				if (!importer) {
-					return callback()
-				}
-
-				const moduleName = this.handler?.(innerRequest, importer)
-				if (!moduleName) {
-					return callback()
-				}
-
-				this.log(LogLevel.Debug, `${innerRequest} -> ${moduleName}`)
-
-				return resolver.doResolve(
-					resolver.hooks.resolve,
-					{ ...request, request: moduleName },
-					"",
-					context,
-					callback,
-				)
-			})
+	apply(c: Compiler | Resolver) {
+		if (this.isRsolver(c)) {
+			this.setup(c)
+			return
+		}
+		c.resolverFactory.hooks.resolver.for("normal").tap(PLUGIN_NAME, this.setup.bind(this))
+	}
+	setup(resolver: Resolver) {
+		const target = resolver.ensureHook("resolve")
+		const hook = resolver.getHook("described-resolve")
+		hook.tapAsync(PLUGIN_NAME, (request, resolveContext, callback) => {
+			const innerRequest = request.request || request.path
+			if (!innerRequest || !request.module) return callback()
+			const importer = (request as Request).context?.issuer
+			if (!importer) return callback()
+			const moduleName = this.handler?.(innerRequest, importer)
+			if (!moduleName) return callback()
+			this.log(LogLevel.Debug, `${innerRequest} -> ${moduleName}`)
+			return resolver.doResolve(target, { ...request, request: moduleName }, "", resolveContext, callback)
 		})
 	}
+	isRsolver(obj: any): obj is Resolver {
+		return typeof obj?.doResolve === "function"
+	}
 }
 
 export default TsPathsResolvePlugin

packages/ts-paths-resolve-plugin/package.json

@@ -31,6 +31,7 @@
     "webpack": "^5"
   },
   "devDependencies": {
+    "enhanced-resolve": "^5.9.0",
     "webpack": "^5"
   },
   "keywords": [

packages/ts-paths-resolve-plugin/types/index.d.ts

@@ -1,10 +1,13 @@
+import type { Resolver } from "enhanced-resolve"
 import { createHandler, LogFunc, RegisterOptions } from "typescript-paths"
 import type { Compiler } from "webpack"
 export interface PluginOptions extends Omit<RegisterOptions, "loggerID"> {}
 export declare class TsPathsResolvePlugin {
 	handler: ReturnType<typeof createHandler>
 	log: LogFunc
 	constructor({ tsConfigPath, respectCoreModule, logLevel, colors }?: Partial<PluginOptions>)
-	apply(compiler: Compiler): void
+	apply(c: Compiler | Resolver): void
+	setup(resolver: Resolver): void
+	isRsolver(obj: any): obj is Resolver
 }
 export default TsPathsResolvePlugin

packages/typescript-paths/types/paths.d.ts

@@ -1,40 +1,5 @@
 import ts from "typescript"
 import { LogFunc } from "./logger"
-export declare const coreModules: {
-	assert: string
-	buffer: string
-	child_process: string
-	console: string
-	cluster: string
-	crypto: string
-	dgram: string
-	dns: string
-	events: string
-	fs: string
-	http: string
-	http2: string
-	https: string
-	net: string
-	os: string
-	path: string
-	perf_hooks: string
-	process: string
-	querystring: string
-	readline: string
-	repl: string
-	stream: string
-	string_decoder: string
-	timers: string
-	tls: string
-	tty: string
-	url: string
-	util: string
-	v8: string
-	vm: string
-	wasi: string
-	worker: string
-	zlib: string
-}
 export interface Mapping {
 	pattern: string
 	prefix: string