Ответ
Да, настраивал. Основные шаги:
- Установка
webpack,webpack-cli,webpack-dev-server - Создание конфига
webpack.config.js - Настройка entry, output, loaders (для JS, CSS, изображений)
- Добавление плагинов (HtmlWebpackPlugin, MiniCssExtractPlugin и др.)
- Конфигурация dev-сервера и оптимизация для production.
Пример минимальной конфигурации:
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /.js$/, use: 'babel-loader' },
{ test: /.css$/, use: ['style-loader', 'css-loader'] }
]
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
};Также настраивал разделение кода, кеширование, environment variables.
Ответ 18+ 🔞
А, настраивал, блядь! Ну, это же классика, ёпта, как Герасим Муму топил — по шагам, но с чувством, с расстановкой, с ебаным осознанием происходящего.
Слушай, вот как это было, по косточкам разберу, а то ты смотришь на меня, как на идиота, который про «Муму» рассказывает.
Шаг первый, основа основ. Ставишь, сука, трёх китов: webpack, webpack-cli и webpack-dev-server. Без них ты как Герасим без метлы — нихуя не подметишь, только мычать «му-му» будешь в пустой папке.
Шаг второй — священный свиток. Создаёшь файлик webpack.config.js. Это твоя карта, твой план, твоя мантра. Без него webpack — просто злая, немая туша, которая нихуя не понимает.
Шаг третий — загрузка мозгов (loaders). Вот смотри, пример минимальной, но боевой конфигурации, чтобы не охуеть с непривычки:
module.exports = {
entry: './src/index.js', // Отсюда, блядь, всё начинается. Точка входа, как дверь в квартиру.
output: {
filename: 'bundle.js', // А сюда всё выльётся одним файлом. Иногда не одним, но это уже высший пилотаж.
path: path.resolve(__dirname, 'dist') // Папка `dist` — это святое. Туда всё складывается, как в амбар.
},
module: {
rules: [ // А вот тут правила, ёпта! Кто как будет обработан.
{ test: /.js$/, use: 'babel-loader' }, // Всякую современную JS-поебень превращает в старьё, чтобы старые браузеры не выли.
{ test: /.css$/, use: ['style-loader', 'css-loader'] } // CSS вытащит из модулей и в голову HTML встроит. Магия, блядь!
]
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })] // Плагин — это как умный помощник. Этот, например, HTML-файл сам соберёт и скрипт туда прилепит. Красота!
};Шаг четвёртый — плагины, ёбана! HtmlWebpackPlugin — это святое, MiniCssExtractPlugin — чтобы CSS отдельным файлом вышло, а не в шапке болталось. Без них — живи в каменном веке.
Шаг пятый — разделение властей. Настроил разделение кода (code splitting), чтобы не грузить пользователю овердохуища мегабайт за раз. Кеширование, environment variables — это уже для продвинутых, чтобы на продакшене всё летало, а не ползало, как рак.
И да, отдельно, блядь, конфигурил дев-сервер, чтобы при каждом сохранении файла не обновлять страницу вручную, как лох. И оптимизацию для production — это отдельная песня, там такой трэш и угар начинается с минификацией, сжатием и прочей ебалой, что волосы дыбом встают.
В общем, настроил, блядь. Теперь всё работает. Не то чтобы идеально, но работает. Как Герасим после утопления Муму — вроде жив, но совесть, сука, гложет за каждый лишний килобайт в бандле.