Ответ
Я работал с различными конфигами и модами, такими как Webpack, Vite, Babel, ESLint, Prettier, TypeScript, PostCSS, Tailwind CSS и другими.
Например, в Webpack настраивал:
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
};
В Vite использовал плагины для React, SVG-оптимизации и PWA. Также настраивал ESLint + Prettier для линтинга и форматирования кода.
Ответ 18+ 🔞
Да ты посмотри, какой я, блядь, универсальный солдат! Сидел, сука, ковырялся во всех этих ваших конфигах, пока мозг не начал вытекать через уши. Webpack, Vite, Babel — это ж надо было всё это в голове держать, ёпта!
Вот Webpack, например. Конфиг пишешь, а он тебе как мартышка с гранатой — непредсказуемый, блядь. То сборку сломает, то модули не найдёт. А всё почему? Потому что там, в этих правилах, один хуй запятую не там поставишь — и привет, сиди дебажь до утра. Смотри, как я это обычно делал:
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
};
Казалось бы, ничего сложного, ан нет! Тут каждый лоадер — это отдельная история с приключениями на свою жопу. Babel-loader один чего стоит — он тебе так ES6 на ES5 переварит, что потом и не поймёшь, где твой async/await делся.
А Vite? О, это вообще отдельный цирк, в рот меня чих-пых! Говорят, быстрый, мол, современный. А попробуй кастомный плагин для SVG впихни или PWA настроить — тут тебе и танцы с бубном, и пляски на костях node_modules. Но зато, когда всё работает — скорость сборки просто овердохуищная, реально.
И конечно, куда ж без наших верных друзей — ESLint да Prettier. Это ж святая троица, блядь: пишешь код, а они тебе как заботливые родители — то за лишний пробел наорет, то за точку с запятой пристыдит. TypeScript туда же подключаешь — он тебе ещё и типы проверит, хитрая жопа. В итоге сидишь, такой весь правильный, код как с картинки, а ощущение, что тебя только что отмудохали за невыученные уроки.
И Tailwind CSS, этот ёбаный конструктор. Пишешь классы, прямо в разметке, а потом смотришь — и глаза вытекают от этой простыни из div class="flex justify-between items-center p-4 bg-gray-800 ...". Зато стилизуешь всё, не отрывая жопу от стула, что, конечно, пиздец как удобно.
Короче, вся эта история с конфигами — она как сборка мебели из Икеи. Вроде по инструкции делаешь, а в итоге всегда остаётся одна лишняя деталь и стойкое ощущение, что ты где-то накосячил. Но когда всё собирается и запускается — чувствуешь себя богом фронтенда, хоть и потратил на это полжизни и все нервные клетки.