Laravel-mix: How to add alias to a directory?

[jericopulvera]

I have a project and want to create a custom shortcut.

For example, I have a chat component on this path resources/assets/js/components

and I want to import chat component from components directory from Vue router directory

resources/assets/js/router/index.js

// Instead of this
import Chat from '../components/Chat'

// I want it to be like this
import Chat from '@components/Chat'

In summary, I want

'@components' to be mapped to 'resources/assets/js/components'

[jericopulvera]

Found the answer to my question here #1219
turns out it's a Webpack thing.
Just add this in your webpack.mix.js
mix.webpackConfig({ resolve: { alias: { "@components": path.resolve( __dirname, "resources/assets/js/components" ) } } });

[SimonEast]

Related to this, I've inherited a project that has imports like this...

import Xxx from '@Xxx';
import Yyy from '@Yyy';

Ideally I want anything starting with an @ to be loaded from a specific directory. Unfortunately creating an alias such as:

alias: { '@': 'path/goes/here' }

...does NOT work. This would only work if the import statements were @/Xxx. Maybe it's a limitation of webpack. 😏 The only way I've discovered to make it possible is by individually listing the imports, which is a bit of a pain:

alias: {
    '@Xxx', 'path/goes/here',
    '@Yyy', 'path/goes/here',
}