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:

1const mix = require('laravel-mix');
2require('laravel-mix-alias');
3
4mix.alias({
5    '@': '/resources/assets/js',
6    '~': '/resources/assets/sass',
7    '@components': '/resources/assets/js/components',
8});

Which enables you to write import statements like this:

1import '~/variables'
2import '@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:

1mix.webpackConfig({
2    resolve: {
3        alias: {
4            '@': path.resolve(__dirname, 'resources/js/')
5        }
6    }
7});

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.