Make VS code read webpack.config and recognize path with alias?

Question

I'm working with Webpack and Visual Studio Code and in order to avoid things like:

import { AuthenticationService } from '../../../services/authentication/service'; 

I've created aliases on my webpack.config so I can use:

import { AuthenticationService } from 'services/authentication/service'; 

However, by doing so Visual Code is not able to detected my code and therefore I lose the intelisense for my classes.

Does anyone have a solution for that, is there a way to make VS code to read the webpack.config and recognize the path with the alias?

thanks in advance

Answer 1

update [email protected] and you can map the same webpack aliases on tsconfig.json by adding:

"compilerOptions": {     "baseUrl": "./",     "paths": {       "app/*": ["src/app/*"]     } } 

Answer 2

I ran into a similar issue. Because I was using javascript rather than typescript, I had to create a jsconfig.json file and use the paths option appropriately.

Assuming a directory structure like this:

. ├── src │   ├── foo.js │   ├── jsconfig.json # your vscode js config │   └── my-module     # folder you're aliasing │       └── bar.js └── webpack.config.js # your webpack config 

This wound up working for me:

1. Set up webpack resolve alias:

   var path = require('path'); module.exports = {   resolve: {     alias: {       "my-module": path.resolve(__dirname, './src/my-module')     }   },   // ... other webpack options }; 

2. Modify jsconfig.json in your src folder:

   {   "compilerOptions": {     "target": "es6",     "paths": {       "my-module": ["./my-module"]     }   } } 

3. Use the alias:

   // in foo.js import Bar from 'my-module/bar'; Bar.quack();