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

Platform Engineer
Canada
Maple
Intermediate Laravel Developer
Austin, TX
Elevation Energy Group
Sr. PHP Developer
Las Vegas
William Hill
Full Stack Laravel Vue Developer
Remote / Bay Area
ZAM Apps, Inc.
Senior Backend PHP Developer (Symfony) (Remote)
Remote
Project Admission
Intermediate Laravel Developer (No Remote, Toronto Only)
Toronto, Canada
Inkbox Ink Inc
Looking for Senior Full-stack Laravel/React.js Javascript API Developer - Immediate (Full-time)
Remote
ApproveMe // Document Signing