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:
Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.