typescriptwebpack

Webpack resolve.alias does not work with typescript?


I try to shorten my imports in typescript

from import {Hello} from "./components/Hello";

to import {Hello} from "Hello";

For that I found out you can use resolve.alias in webpack thus I configured that part as following

resolve: {
    root: path.resolve(__dirname),
    alias: {
        Hello: "src/components/Hello"
    },
    extensions: ["", ".ts", ".tsx", ".js"]
},

Webpack builds, and the output bundle.js works. However typescript's intellisense complain it cannot find the module

So my question is whether or not webpack's resolve.alias works with typescript?

I found following issue but there's no answer to it.


Solution

  • If you're using ts-loader, you might have to synchronize your webpack alias/resolve settings with your paths setting in your tsconfig.json.

    {
        "compilerOptions": {
            "baseUrl": "./",
            "paths": {
                "Hello": ["src/components/Hello"]
            }
        }
    }
    

    If you're using awesome-typescript-loader, then webpack can figure this out automatically from the paths setting in your tsconfig.json, as per the status on this issue from the repo. That way, you don't need to duplicate the same information in your Webpack alias field.