Минифицировать названия классов используя css-module?

Question

[sirinotapple]

Здравствуйте, я решил попробовать минимизировать имена css классов для небольшой обфускации и минификации.
Для этого использою css-modules с настройкой

getLocalIdent: MinimalClassnameGenerator({ length: 1 })
//где  MinimalClassnameGenerator — https://github.com/neatsoftware/webpack-minimal-classnames

и css имена классов действительно минифицируются, но в js бандла нашел такое

const N = { class: "super-puper-class" },
 $style: {
              "super-puper-class": "J",

Что говорит о том что имена минифицировались лишь на стороне css а их js обозначения не изменились, такой вариант не сильно что-то меняет и хотелось бы реальной минимизации имен, а не наполовину, сталкивался ли кто-нибудь с чём-то подобным... Удалось ли вам найти решение, пока в https://github.com/webpack-contrib/css-loader#auto нечего найти не удалось(

Answer 1

[Aetae]

Магии не существует, друже.
Что на самом деле делает webpack лоадер? Он берёт на вход какой-то файл, что-то с ним делает и выдаёт js-модуль(в виде строки) с результатом + какие-то побочные действия.

Соответственно css-loader для модулей делает (утрировано) 2 вещи:
1. Из входного css генерирует js-модуль с объектом вида

{ [ключ - настоящее имя класса]: [значение - минифицированное] }

и отдаёт результат в js.
2. Выполняет замену в css настоящих имён на минифицированные и сохраняет отдельно.

Чтобы получить то, что ты хочешь - надо добавить некий loader для .js файлов который удалит все импорты css-модулей из кода(но сохраняя результаты) и заменит все обращения вида $style.className на значения из этих модулей.
Погугли, что-то такое кто-то должен был запилить.)
Ну и в любом случае, чтобы это работало нужна гарантия, что никакой динамики у тебя в коде работы с css модулями нет, т.е. что-то такое: $style[somevar + '__bold'], гарантировано сломает любую такую штуку.