CODEWITHSUNDEEP
javascripttypescriptwebpackimport
Marek Krzeminski
Marek Krzeminski

Reputation: 1398

How to define a typescript import path relative to some root (using webpack)?

I'm writing a Vue application that has many components which are nested in different folders. My folder structure looks something like this:

src folder
+components folder 
++partA folder
+++A.vue
+++AA.ts
+++subA folder
++++AAA.ts
++partB
+++B.vue
+++BB.ts

Inside my typeScript files, I sometimes need to refer to one of the other components so I end up with code that looks like:

import { something } from '../../partB/BB'
import { another } from './subA/AAA'

Is there a way to setup webpack so that I can always specify the import path to my components relative to the root (src) folder rather than having a bunch of relative paths defined that are specific to the file which is using the import statement?

Upvotes: 0

Views: 1792

Answers (1)

Marek Krzeminski
Marek Krzeminski

Reputation: 1398

I found a solution by using webpack's resolve alias: https://webpack.js.org/configuration/resolve/

in conjunction with tsconfig.json (https://www.typescriptlang.org/docs/handbook/compiler-options.html). I needed to specify a baseUrl and paths to match what I have setup in my resolve alias.

Upvotes: 1

Related Questions