Laravel : set resolve alias in Laravel mix

Laravel : set resolve alias in Laravel mix .js

Add the following config at the beginning of webpack.mix.js.

let mix = require('laravel-mix');
const path = require('path')

mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@components': path.resolve(__dirname, 'resources/js/app/components'),
            '@services': path.resolve(__dirname, 'resources/js/app/services')
        }
    }
});

Then, we can import like this:

import UserComponent from '@components/UserComponent'
import { userService }  from '@services/user.service'