Laravel Mix Alias

News

May 3rd, 2019

laravel-mix-alias.png

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.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.