Есть ли опыт сборки в Webpack

Ответ

Да, есть. Работал с Webpack 4 и 5, настраивал конфиги с нуля и дорабатывал существующие. Основные задачи:

  • Настройка entry/output
  • Подключение loaders (babel, sass, file-loader)
  • Оптимизация через splitChunks, минификацию
  • Работа с плагинами (HtmlWebpackPlugin, CleanWebpackPlugin)
  • Настройка dev-server и HMR

Пример простого конфига:

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',
      },
    ],
  },
};

Также есть опыт интеграции с Vue/React и настройки environment переменных.

Ответ 18+ 🔞

А, Вебпак, говоришь? Да, блядь, был у меня с ним близкий, почти интимный опыт, ёпта. И с четвёртым, и с этим, новым, пятым, который как будто всё то же самое, но хуй поймёшь, что куда переехало.

Что делал? Да всё, что этой мартышке от меня было нужно, сука. Приходишь на проект — а там либо конфига вообще нет, либо он такой древний, что кажется, его писали ещё до изобретения огня. И начинается, блядь, цирк.

Сначала entry/output настраиваешь — вроде просто, да? А потом выясняется, что у них полпроекта в src, а половина скриптов валяется в папке legacy_scripts_final_final_2, и всё это надо как-то, блядь, собрать в кучу. Чувствуешь себя археологом, ебать мои старые костыли.

Потом подключаешь эти самые loaders. Babel, чтобы современный JS превратить в то, что поймёт браузер твоего деда. Sass, чтобы стили не просто были, а были с преферансом и бабами. File-loader, чтобы картинки не разбежались, сука, кто их знает, где они потом окажутся.

А вот оптимизация — это отдельный ёперный театр. Сидишь, ковыряешься в splitChunks, пытаешься понять, как от этого овердохуища бандлов сделать так, чтобы хотя бы три вменяемых куска получилось. А плагины эти... HtmlWebpackPlugin — вроде умный, сам скрипты в html вставит, а потом раз — и он тебе нагенерирует пятнадцать html-файлов, потому что ты не так посмотрел. Чистишь потом за ним, как за котом, сука.

Ну и, конечно, dev-server с этим его HMR. В теории — изменил код, страница сама обновилась, красота. На практике — половина времени он просто молча перезагружает всю страницу, а вторая половина — он зависает с непонятной ошибкой, и ты сидишь и гадаешь, это ты идиот или он просто мудак сегодня.

Короче, вот тебе простой конфиг, с которого всё начинается, а потом он обрастает такими дебрями, что сам Чиполлино в них заблудится.

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',
      },
    ],
  },
};

А ещё, бывало, прикручивал его к Vue или React. Там свои приколы, блядь: свои плагины, свои loaders, своя магия, которая работает ровно до момента, когда ты обновляешь одну из зависимостей. И всё, пиздец, накрылся медным тазом, сидишь и роллбэкаешь версии, как полупидор.

Environment переменные настраивал — тоже веселье. Чтобы на продакшене одно подставлялось, а локально — другое. Вроде мелочь, а если налажать, то приложение на боевом сервере может такое вытворять, что волосы дыбом встанут. Удивление пиздец, в общем.

Вот такая, блядь, собака сука. Инструмент мощный, но иногда так хочется им по стукнуться, чтобы он, зараза, думал.