starcorn starcorn - 9 months ago 239
TypeScript Question

Webpack resolve.alias does not work with typescript?

I try to shorten my imports in typescript


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

import {Hello} from "Hello";

For that I found out you can use
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.

Answer Source

If you're using ts-loader, you'll have to syhchronize your webpack alias 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.