Предварительное изменение конфигурации загрузчика CSS веб-пакета

Question

Я хотел бы изменить конфигурацию веб-пакета в Preact, чтобы в ней были только хешированные имена классов, а также сделать их короче, если это безопасная практика.

Загрузчик CSS отлично работает в моем проекте Preact, но иногда компонент виден в именах классов, даже если на файл Modules.css ссылается только этот компонент.

https://github.com/preactjs/preact-cli/wiki/Config-Recipes#setting-proxy-for-dev-server-using-config-directly

Я наткнулся на эту документацию, но у меня недостаточно опыта, чтобы заставить ее работать, и я ищу конкретный код, который можно написать в моем preact.config.js.

Answer 1

Вам нужна следующая конфигурация, но если у вас возникнут с ней проблемы, дайте мне знать:

      // preact.config.js

/**
 * @param {import('preact-cli').Config} config - original webpack config
 * @param {import('preact-cli').Env} env - current environment and options pass to the CLI
 * @param {import('preact-cli').Helpers} helpers - object with useful helpers for working with the webpack config
 */
export default (config, env, helpers) => {
    const { loader: cssLoader } = helpers.getLoadersByName(config, 'css-loader')[0];
    cssLoader.options.modules.localIdentName = '[hash:base64:5]';
}

Общая идея здесь заключается в том, что мы получаем использованиеpreact-cliпомощники конфигурации (описаны здесь ), но особенно первый; первый предназначен для модулей CSS или CSS, который вы создаете.components/иroutes/. Второйcss-loaderэкземпляр предназначен для всех остальных созданных вами CSS, которые не будут хешироваться, поэтому мы проигнорируем его и получим только первый ([0]).

Затем мы просто обновляем параметры. Значение по умолчанию можно найти здесь , и мы просто изменяем его, чтобы использовать только хэш, отбросивlocal__часть.

Что касается сокращения хэшей, я бы не стал. Если вы станете короче, вы резко увеличите вероятность возникновения коллизии в кешах.