Как правильно настроить webpack alias resolve?

Question

[vbulash]

По коду JSX импорт выглядит так:
import GuestLayout from '@/Layouts/GuestLayout';
здесь @ = resources/js (VSCode видит такие импорты, так как нормально настроен jsconfig.json).
Сборку должен делать webpack.
webpack.config.js выглядит так:

const path = require('path');

module.exports = {
	resolve: {
		alias: {
			'@': path.resolve(__dirname, '/resources/js')
		}
	}
};

Сборка по npm run dev заканчивается примерно так:

ERROR in ./resources/js/Pages/Auth/ConfirmPassword.jsx 2:0-48
Module not found: Error: Can't resolve '@/Layouts/GuestLayout' in '/Users/vbulash/VSCode/hr-usluga/resources/js/Pages/Auth'

То есть alias @ не работает вообще ((
Что не так?

Comments

[RAX7]

Попробуй в resolve.extensions добавить jsx
https://webpack.js.org/configuration/resolve/#reso...

[vbulash]

Тоже нет ((

[vbulash]

По всем предложениям (увы, не работает вообще):

const path = require('path');

module.exports = {
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './resources/js')
		},
		extensions: ['.jsx']
	}
};

Answer 1

[vbulash]

Нашел.
Самое главное - webpack.mix это не совсем webpack.
Конфигурация webpack.mix один в один как у webpack, но webpack.config.js не подхватывается вообще.

В итоге webpack.mix.js выглядит так:

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

// Конфигурация webpack
mix.webpackConfig({
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './resources/js')
		},
		extensions: ['.jsx']
	}
});

// Директивы сборки
mix
	.js('resources/js/app.jsx', 'public/js')
	.react()

	.postCss('resources/css/app.css', 'public/css', [
		require('tailwindcss'),
	]);