How to configure path alias in webpack.mix?

Question

Solution:

Thanks to both Karl & Ali I can now use alias' without having to create a seperate webpack.config.js file. Just add the alias to webpack.mix.js like so:

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .alias({'@': 'resources/'})
    .webpackConfig({resolve: {alias: {'@': path.resolve('resources/')}}})
    .vue();

Question:

From this post, I learned that you could configure your @ path in webpack.mix.js to represent the assets/resources folder in a vue/laravel project so that you can use the @ symbol in your paths.

mix.webpackConfig({
  resolve: {
    alias: {
      '@resources': path.resolve('resources'),
    },
  },
})

Unfortunately, this leads to the following error.

yarn run v1.22.17 $ mix watch [webpack-cli] ReferenceError: path is not defined at Object. (/Users/artur/PhpstormProjects/safa-ameedee.com/webpack.mix.js:16:21) at Module._compile (node:internal/modules/cjs/loader:1097:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10) at Module.load (node:internal/modules/cjs/loader:975:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:999:19) at require (node:internal/modules/cjs/helpers:102:18) at module.exports (/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/laravel-mix/setup/webpack.config.js:11:5) at loadConfigByPath (/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/webpack-cli/lib/webpack-cli.js:1747:27) at async Promise.all (index 0) error Command failed with exit code 2.

I've tried different variations (@assets etc.), but I always get the same error. So what am I doing wrong?

Satyr

did you import the path previously e.g. using const path = require('path')? – Penknife

Answer 1

In your webpack.mix.js:

...
.alias({'@': 'resources/js'})
...

Import Aliases - Laracasts

Piotr

This will probably work in most use cases beware if you ever try to run mix from a directory outside your project root or if you run it and set a different working directory since it may not work in that case – Penknife

Some might prefer ~ instead of @ since the latter may be used as scope context in NPM (e.g. @npm/package-name). Related: docs.npmjs.com/about-scopes – Schlock

Answer 2

You're not adding the explicit require of the path package, but you should do so. Make sure you add the following to the top of your webpack.config.js file.

const path = require('path');

Also, you may need to add __dirname.

const path = require('path');

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

Sismondi

The thread I've posted mentioned, that this should work without having to create a seperate webpack.config.js file. Is there a way to just use webpack.mix.js? – Wheels