Is there a way to customize the file import paths within a package?
I am working with a UI kit package for our internal project and after building with Webpack, my project structure looks like this:
- dist
- components
- index.d.ts
- index.js
Prior to the webpack build, my index.ts file had imports structured like this:
import { Button } from './components/Button';
...
import { Input } from './components/Input';
export { Button, ..., Input };
Currently, I can successfully import the component using @package/name; but I would like to modify the paths for easier access:
import { Button } from '@package/name/base';
import { AccountIcon } from '@package/name/icons';
If I adjust the structure of the dist folder, I can achieve the desired outcome but the path includes 'dist' in it:
import { AccountIcon } from '@package/name/dist/icons';
Is there a way to eliminate 'dist' from the path and what is the best approach to accomplish this? Are there any resources or guides available on this topic? I have attempted changes in the package.json, created a new structure inside the dist folder, and tweaked the webpack configuration without success.