webpack 5

💼 Упражнение 5

✅ webpack.config.js
✅ style-loader
✅ css-loader

css-модули

Создадим в папке нашего проекта папку 📂 css

Поместим в нее файл 📝 main.css

📝 main.css

body {
        background-color: #000;
        font-family: monospace, Arial;
        font-size: 16px;
        color: #9ab;
}

📝 script.js

Добавим в файл script.js импорт созданного нами файла стилей:

import css from '../css/main.css'

🔧 Сборка

А теперь запустим сборку проекта

🚫 Вебпак выдаст нам ошибку:

он умеет собирать модули js, а вот для загрузки файлов других форматов нужны специальные загрузчики

📋 webpack.config.js

Создадим файл webpack.config.js в корневой папке нашего приложения

Это скрипт, который создаст объект конфигурации webpack

Основные свойства объекта конфигурации:

☑️ entry - точка входа

с этого файла начинается построение графа зависимостей

☑️ output - файл сборки ( результат )

☑️ module - это свойство описывает модули сборки

по умолчанию модулями являются js-файлы

для того, чтобы не js-файлы ( например, css или html )

подключались в сборку как модули, нужны специальные загрузчики

Объект module имеет свойство rules,

которое также является объектом и содержит два свойства:

✅ rules

✅ test

✅ use

В свойстве rules.test описывается тип файлов,

которые могут быть загружены как модули ( regular expression )

В свойстве rules.use указывается загрузчик для файлов данного типа

☑️plugins - плагины