How to configure path alias in webpack.mix? - laravel

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?

Answer 1

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/')
}
}
});

Answer 2

In your webpack.mix.js:
...
.alias({'#': 'resources/js'})
...
Import Aliases - Laracasts