Laravel-mix: Several default webpack aliases in laravel-mix?

Created on 4 Nov 2018 · 5Comments · Source: JeffreyWay/laravel-mix

It would be great to have aliases in laravel-mix, covering the default Laravel project's structure.

At least, resources/sass and resources/js folders.
The resources/js/components would be nice too.

For example, the resources/sass folder:

mix.webpackConfig({
    resolve: {
        alias: {
           sass: path.join(__dirname, 'resources/sass')
       }
    }
});

To be able to import sass files from the Vue components:

@import "~sass/vars";

Without touching the config...

Source

dmitry-ivanov

Most helpful comment

Anyways, there is also the problem with IDE support of those aliases.

For example, PHPStorm doesn't recognize aliases defined in the webpack.mix.js file via mix.webpackConfig() call. Even if you tell him in Preferences -> Languages and Frameworks -> JavaScript -> Webpack the path to the webpack.mix.js as the webpack configuration file.

So, the workaround for me is to have the separate webpack.config.js file in the root of the project:

/**
 * The Path module.
 */
const path = require('path');

/**
 * Custom Webpack config.
 *
 * Described here, in the separate file, for the IDE support.
 *
 * @see https://gist.github.com/nachodd/4e120492a5ddd56360e8cff9595753ae
 */
module.exports = {
    resolve: {
        alias: {
            /**
             * An alias for the JS imports.
             *
             * Example of usage:
             * require('~/components/AutocompleteLocation');
             */
            '~': path.resolve(__dirname, './resources/js'),

            /**
             * An alias for the SASS imports.
             *
             * Example of usage:
             * @import "~sass/_vars";
             */
            'sass': path.resolve(__dirname, './resources/sass'),
        }
    }
};

And then, in your webpack.mix.js:

/**
 * Custom webpack config.
 */
mix.webpackConfig(require('./webpack.config'));

PS: Don't forget to check that PHPStorm uses webpack.config.js as the webpack configuration file.

dmitry-ivanov on 9 Nov 2018

🎉3

All 5 comments

Given that laravel-mix can be used outside of laravel, I'd suggest this gets locked behind the "sees Laravel" gate.

hailwood on 9 Nov 2018

Even its name "sees Laravel" :)

PS: Maybe aliases can be added on some condition.

If it's possible to check that Mix works in the Laravel app now...

dmitry-ivanov on 9 Nov 2018

Anyways, there is also the problem with IDE support of those aliases.

So, the workaround for me is to have the separate webpack.config.js file in the root of the project:

/**
 * The Path module.
 */
const path = require('path');

/**
 * Custom Webpack config.
 *
 * Described here, in the separate file, for the IDE support.
 *
 * @see https://gist.github.com/nachodd/4e120492a5ddd56360e8cff9595753ae
 */
module.exports = {
    resolve: {
        alias: {
            /**
             * An alias for the JS imports.
             *
             * Example of usage:
             * require('~/components/AutocompleteLocation');
             */
            '~': path.resolve(__dirname, './resources/js'),

            /**
             * An alias for the SASS imports.
             *
             * Example of usage:
             * @import "~sass/_vars";
             */
            'sass': path.resolve(__dirname, './resources/sass'),
        }
    }
};

And then, in your webpack.mix.js:

/**
 * Custom webpack config.
 */
mix.webpackConfig(require('./webpack.config'));

PS: Don't forget to check that PHPStorm uses webpack.config.js as the webpack configuration file.

dmitry-ivanov on 9 Nov 2018

🎉3

Hmmm, now I think that it may be a PR to the laravel/laravel actually... would do it in a few days...

dmitry-ivanov on 9 Nov 2018

If anyone comes across this issue, https://github.com/JeffreyWay/laravel-mix/issues/1806#issuecomment-437303912 is the only way I could get mix.webpackConfig() to work.