и не только этим 😏

В режиме разработки стили вшиваются прямо в DOM, чтобы работало мгновенное обновление без перезагрузки страницы. А для продакшена Webpack сам аккуратно выносит весь CSS в отдельный сжатый файл с хэшем!

import MiniCssExtractPlugin from "mini-css-extract-plugin";

const isDev = env.mode === "development";
const isProd = env.mode === "production";

isProd &&
  new MiniCssExtractPlugin({
    filename: "css/[name].[contenthash:8].css",
    chunkFilename: "css/[name].[contenthash:8].css",
  }),

rules: [
  {
    test: /\.s[ac]ss$/i,
    use: [
      isDev ? "style-loader" : MiniCssExtractPlugin.loader,
      "css-loader",
      "sass-loader",
    ],
  },
]

Ночной кодинг 🌙⚡️
Решил собрать свою собственную сборку на Webpack. Понятно, что сейчас все юзают Vite, но мне хочется досконально понять, как всё устроено под капотом — лоадеры, плагины, декомпозиция, поддержка TS/TSX и SCSS.
Зачем? Хочу выстроить крепкий фундамент перед тем, как полноценно ворваться во Vue.js. Когда понимаешь, как проект собирается изнутри, любой фреймворк даётся в разы проще.
Процесс идет, сборка почти готова! 🚀

За сегодня: сделал декомпозицию сборки, делаю изоляцию стилей через css modules.🥳

За эти 2 часа в сборку добавил:

1️⃣ CSS modules
2️⃣ Роутинг
3️⃣ Ленивые чанки
4️⃣ Размер бандла
5️⃣ Bundle analyzer

Сборка почти готова 🧑‍💻🚀

Добавил Алиасы для js и ts , теперь пути будут выглядеть аккуратно

Я изучаю Vue! 🥳
Настроил окружение и создал папку для нового проекта. В ближайший месяц буду пилить на нём полноценное веб-приложение — интернет-магазин кофе ☕️
Радует, что фреймворк берёт на себя всю рутину с DOM и делает разработку в разы быстрее. Дальше — больше! 🚀

Что сделано:

1️⃣ Настроил роутеры во Vue, теперь переключение между страницами происходит без перезагрузки , контент генерируется динамически.
2️⃣ Добавил роутеры только для 2-х страниц, для других добавлю позже.

Сделал то же самое с карточками товара