Laravel Mix Alias

Laravel Mix Alias

Laravel Mix Alias is an NPM package that provides a convenience method around WebPack’s resolve.alias configuration.

Here’s an example of how you can make require and import statements simpler:

const mix = require('laravel-mix');
require('laravel-mix-alias');

mix.alias({
    '@': '/resources/assets/js',
    '~': '/resources/assets/sass',
    '@components': '/resources/assets/js/components',
});

Which enables you to write import statements like this:

import '~/variables'
import '@components/ToggleInput.vue';

If you’re not familiar with Webpack’s resolve.alias config, here’s how you can use it in Mix without this package:

mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js/')
        }
    }
});

You might prefer the convenience of the mix.alias method this package provides over resolving paths; however, if you prefer this without a package this configuration isn’t super complicated.

If you would like to learn more about extending laravel-mix, Jeffrey Way has provided a helpful document on building a plugin for Laravel Mix. Check it out for ideas on tapping into Laravel Mix!

To learn more about the Laravel Mix Alias package check it out on GitHub at MaximVanhove/laravel-mix-alias and the NPM package laravel-mix-alias.

Filed in: News / Mix
Laravel News Partners

Laravel Jobs

Backend Software Engineer (PHP Developer)
Austin TX, Bonita Springs FL
Certified eSupport Corp
Laravel Developer
Glendale, CA (COVID Remote)
Jogg, Inc
Senior PHP Engineer
Remote, USA Only
Kittyhawk
Full Stack Engineer
Remote
Shelterluv
Kickass LaraDev!
Remote
Megaverse

Newsletter

Join 31,000+ others and never miss out on new tips, tutorials, and more.