1.0.2 • Published 8 months ago
@marcuwynu23/webpack-plugin-alias-resolver v1.0.2
webpack-plugin-alias-resolver
🔧 A Webpack plugin that rewrites alias-based imports (like @/) into relative paths during build time. Useful for TypeScript or Babel outputs that retain unresolved alias paths.
📦 Installation
npm install --save-dev @marcuwynu23/webpack-plugin-alias-resolverWebpack is a peer dependency. Ensure it's installed:
npm install --save-dev webpack🚀 Usage
Add to your webpack.config.js:
import AliasResolverPlugin from "@marcuwynu23/webpack-plugin-alias-resolver";
export default {
// ...your config
plugins: [
new AliasResolverPlugin({
alias: "@/",
baseDir: "js-generated", // folder where alias actually resolves to
targetDir: "js-generated", // folder to scan and fix
fileTypes: ["js", "ts", "json"], // file extensions to rewrite
}),
],
};⚙️ Options
| Option | Type | Default | Description |
|---|---|---|---|
alias | string | "@/" | The alias prefix used in your imports (@/, ~/, etc.) |
baseDir | string | "dist" | Where the alias path actually resolves to (usually output dir) |
targetDir | string | "dist" | Directory to scan and rewrite imports in |
fileTypes | string \| string[] | "js" | File types to rewrite. Use "js", "ts", "both", or an array like ["js", "json"] |
✨ What It Does
This plugin searches files inside targetDir and rewrites lines like:
import { thing } from "@/utils/helper";➡️ into:
import { thing } from "../../utils/helper";This is useful when you're compiling code and the final output still contains unresolved aliases.
💡 Example Project Structure
project/
├── src/
│ └── utils/helper.ts
├── js-generated/
│ └── utils/helper.js ← compiled output
├── webpack.config.js🧪 TypeScript Support
This plugin is fully written in TypeScript and ships with type declarations.
📝 License
MIT © 2025 Your Name