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

Full Stack or Back-End Developer
Alexandria, VA; Tallahassee, FL; Orlando, FL
Marketing for Change
Full Stack Software Engineer
Atlanta, GA or Remote
Voxie
Laravel/PHP Developer
Chicago, IL
Neon One
Software Engineer, Web Applications
Vaughan, ON, Canada
Blast Motion
Contract Services Software Engineer (Laravel | Vue | Tailwind)
Remote
Riverbed Technology
Senior Laravel Developer
Wilmington, NC
GE Software Inc.
Senior Full Stack Developer (PHP | Vue | DDD)
Charleston, SC
MassageBook