если все у меня в dev mode работает, а в build (./dist) стили не подключается это нормально? В дальнейшем его в сервер подключат же

https://pastebin.com/YAj7nGCy
Вебпак для подключения модулей юзает относительные пути. Как его отучить от этого? Проблема в том, что если в двух разных местах подключаю один и тот же модуль, второй получается битый (путь относительный, и следовательно не верный).
в пастабине думаю будет понятно о чем речь

не грузится страница, постмотрел styles.css скомпилированный, там и пути у изображения, шрифтов указано /fonts/exampleFonts.woff2 —> то есть нет точки перед слэшем

чего? )

вместо ./assets/fonts/PTSans-Rеgular.woff2 прописан /assets/fonts/PTSans-Rеgular.woff2 там точки нет

@lvl888 я думаю ты сейчас помогаешь ему решить свою же проблему))) Не надо

а в чём проблема относительных путей то?

сам не понимаю. В 1 месте импорт работает, в другом нет... путь правильный.
В маин жс грузит все.

import Vue from 'vue';
import VModal from 'vue-js-modal';
import Thumbs from '@/js/components/Thumbs.vue';
import CategoriesList from './js/components/CategoriesList.vue';
import VoteBox from './js/components/VoteBox.vue';
import ScrollToTop from './js/components/ScrollToTop.vue';
import './scss/main.scss';
console.log(Thumbs, CategoriesList);

в другом файле:

import CategoriesList from '../CategoriesList.vue';
import VoteBox from '../VoteBox.vue';
import Thumbs from '@/js/components/Thumbs.vue';
import TimeAgo from 'javascript-time-ago';
import ru from 'javascript-time-ago/locale/ru';
console.log(Thumbs, CategoriesList);

Не грузит. Я не понимаю в чем проблема...

смотрю в пути подключения, там относительные.. но блин, 1 модуль подключает нормально, второй глючный. WTF

это не должно быть проблемой вообще

пути перепроверил

но лучше глядеть прям сорсы

кусок прям запускаемый, который не пашет

не то что на pastebin ща

Здравствуйте.
Подскажите пожалуйста, как сделать отладку кода с ES-модулями удобнее?

TL;DR
Хочу иметь возможность при дебаге выполнить в консоли с участием импортируемых переменных, без необходимости писать конструкции вроде _a_js__WEBPACK_IMPORTED_MODULE_0__["foo"], а писать просто foo
И тоже самое для точек останова, зависящих от импортированных переменных

Более подробно:
При использовании ES-модулей, импортированные переменные превращаются в гетер вида _a_js__WEBPACK_IMPORTED_MODULE_0__["foo"]

При дебаге с source-map, код выглядит как в оригинале, а при наведении на импортированную переменную показывается ее значение - тут все ОК
Но при попытке выполнить в консоли какой-то код с участием импортированной переменной она разумеется не находится
Потому что на самом деле такой переменной в скопе нету, а есть объект _a_js__WEBPACK_IMPORTED_MODULE_0__ с гетером
Условные брейкпоинты с ее участием также не работают
Вот необходимость в дебаге ссылатся на нее через оъект модуля очень мешает

Есть ли какие-то способы использовать их в отладке более удобным способом, по тому имени как их импортировали?

Первый вариант, который я нашел, но есть ограничения:
optimization.concatenateModules склеивая модули дает такую возможность, но как я понял он может склеивать не все модули, а только если нет конфликтов по именам переменных
Ну и кроме того в скопе будут видны и другие переменные соседнего модуля
Опять-таки в случае переименование при импорте, перменная на самом деле останется доступна под оригинальным именем

На самом деле хотелось бы, чтобы webpack заменял импорты на что-то вроде

var bar = _a_js__WEBPACK_IMPORTED_MODULE_0__["foo"];

Разумеется при ограничении, что экспорты никогда не должны менятся(что мне подходит)

По-идее ограничение на мутабельность экспортов можно было бы обойти, введением сетера на уровне модуля

// при изменении(=, +=, ...) экспорта `foo` в модуле `moduleId`,  будут вызваны сетеры всех зависимых модулей
__webpack_require__.registerSetter(__webpack_exports__, moduleId, "foo", function(val) { bar = val; })
let bar;

Хотя такое решение порождает проблемы с производительностью, но как опция для dev-режима, оно вполне имеет право на жизнь

Есть ли подобная конфигурация, или другие подходы к удобному дебагу?

ух, сколько текста))) Вообще не уверен на 100%, но по-моему тебе в любом случае придётся делать поправку на искажённые имена переменных и прочее. Благо они в области видимости отображаются и в принципе легко понять кто есть кто. Если конечно до минификации

P.S. сначала написал, потом прочёл, но в общем жалко уже было удалять 😁

Да, так отлаживать я уже привык)
Но на работе обсуждается переезд на es-импорты, и поднялся вопрос "а можно ли удобнее и привычнее отлаживать код?"
Как запасной вариант у меня остаётся кастомный лоадер, который сгенерит кконструкции

var bar = _a_js__WEBPACK_IMPORTED_MODULE_0__["foo"];

Ну и eslint-правило, запрещающее мутировать экспорта
Но опять-таки не хотелось бы изобретать велосипед

Речь в первую очередь про dev-сборку без минификации