Как обфускцировать классы с помощью react и webpack

Question

я создал react простой с помощью create-react-app.

Как я могу обфускцировать классы? Я нашел эту статью, но я не понимаю, как это сделать.

Статья: https://develoger.com/how-to-obfuscate-css-class-names-with-react-and-webpack-20e2b5c49cda

Мое приложение: https://github.com/netBriler/react-notes

Подскажите пожалуйста, что я должен сделать, чтобы обфускцировать классы)

Answer 1

Это делается в настройка css-loader в файле конфигурации Webpack (webpack.config.js).

module: {
    rules: [
        {
        test: /\.css$/,
        use: [
            // ... другие лоадеры
            {
                loader: require.resolve("css-loader"),
                options: {
                    modules: {
                        localIdentName: "[hash:base64]"
                    }
            }
            // ... другие лоадеры
        ],
        include: /\.module\.css$/
        }
    ]
}

Изменяя значение localIdentName можно "собрать" требуемый конечный результат.

Например если класс называется example-name то при настройках:

localIdentName: "[hash:base64]" // e2YeMBJwo5VHqgN5ViGVsK9
localIdentName: "[local]__[hash:base64]" // example-name__e2YeMBJwo5VHqgN5ViGVsK9

Имейте ввиду что согласно правилам naming'a имена классов не должны начинаться с цифр.

create-react-app не предоставляет доступ к файлу конфигурации, для этого придется выполнить команду eject (действие необратимо).

Answer 2

Будут classNames типа: a_a, a_b, a_c .... и так далее.

Выполнить eject
Установить incstr
Создать файл getScopedName.js в папке config.

const incstr = require('incstr');
const createUniqueIdGenerator = () => {
  const uniqIds = {};
  const generateNextId = incstr.idGenerator({
    alphabet: 'abcefghijklmnopqrstuvwxyzABCEFGHJKLMNOPQRSTUVWXYZ',
  });
  return (name) => {
    if (!uniqIds[name]) {
      uniqIds[name] = generateNextId();
    }
    return uniqIds[name];
  };
};
const localNameIdGenerator = createUniqueIdGenerator();
const componentNameIdGenerator = createUniqueIdGenerator();
module.exports = (localName, resourcePath) => {
  const componentName = resourcePath
    .split('/')
    .slice(-2, -1)[0];
  const localId = localNameIdGenerator(localName);
  const componentId = componentNameIdGenerator(componentName);
  return `${componentId}_${localId}`;
};

Открыть webpack.config.js и добавить:

const getScopedName = require('./getScopedName')

Найти секцию на ~445-460 строках и привести к этому виду:

{
  test: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: {
      ...(isEnvDevelopment ? {
        localIdentName: '[path]_[name]_[local]',
      } : {
       getLocalIdent: (context, localIdentName, localName) => (
         getScopedName(localName, context.resourcePath)
       ),
      })
     },
  }),
}

Готово :)

БЛОГ НА HUSL

Как обфускцировать классы с помощью react и webpack

Ответы (2 шт):