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

Question

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?

Marek Krzeminski · Accepted Answer · 2017-12-18 16:02:37Z

1

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.

answered Dec 18, 2017 at 16:02

Marek Krzeminski

1,4383 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related