Path aliases for imports in WebStorm

by

Yes, there is.

In fact, Webstorm can’t automatically parse and apply Webpack config, but you can set up aliases the same way.

You just have to mark the parent folder of “utils” (in your example) as a resource root (right-click, mark directory as / resource root).

right click on folder

We just managed to do with the following structure :

/src
    /A
    /B
    /C

We have A B and C folders declared as alias in Webpack.
And in Webstorm we marked “src” as “Resource Root”.

And now we can simply import :

import A/path/to/any/file.js

instead of

import ../../../../../A/path/to/any/file.js

while still having Webstorm correctly parsing and indexing all code, link to files, autocompleting and so on …

More Related Contents:

  1. “You may need an appropriate loader to handle this file type” with Webpack and Babel
  2. How to correctly use ES6 “export default” with CommonJS “require”?
  3. Angular 2: import external js file into component
  4. How to load image files with webpack file-loader
  5. Static image src in Vue.js template
  6. What does “publicPath” in Webpack do?
  7. where is create-react-app webpack config and files?
  8. I am getting an “Invalid Host header” message when connecting to webpack-dev-server remotely
  9. Rails: Webpacker 4.2 can’t find application in /app/public/packs/manifest.json heroku
  10. Error: Missing class properties transform
  11. webpack –watch isn’t compiling changed files
  12. Webpack Express Cannot Resolve Module ‘fs’, Request Dependency is Expression
  13. Module not found: Error: Can’t resolve vue, path not correct
  14. In the `import` syntax of ES6, how is a module evaluated exactly?
  15. How to fix this ES6 module circular dependency?
  16. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  17. HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths
  18. how to set up an inline svg with webpack
  19. Node JS and Webpack Unexpected token
  20. Import ES module in Next.js ERR_REQUIRE_ESM
  21. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  22. Conflict: Multiple assets emit to the same filename
  23. Output an ES module using webpack
  24. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  25. Document generic type parameters in JSDOC
  26. Exclude module from webpack minification
  27. React JS Server side issue – window not found
  28. Rails 5/6: How to include JS functions with webpacker?
  29. intellisense and code complete for DefinitelyTyped (TypeScript type definitions) on WebStorm IDE
  30. Solution: load independently compiled Webpack 2 bundles dynamically [closed]

Leave a Comment