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


Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Senior PHP/Laravel Developer: Your Dream Work Environment
Remote
iPhone Photography School
Senior Software Engineer
Remote or San Francisco
Curology
Laravel Developer
Las Vegas, NV
V Shred
R&D Developer
Denver, CO
booj
Full-Stack Developer
Paris, France
Wingly
Full Stack Developer
Remote US-Only
atlasMind
Contract Senior Software Developer
Remote
Elevation Energy Group