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	файл сборки	результат работы webpack
☑️	module	описание модулей	по умолчанию модули - это js-файлы для подключения в качестве модулей файлов с другим расширением ( например, .css или .html ) нужны специальные программы-загрузчики Проги-загрузчики "обертывают" содержимое нужного файла в скрипт, чтобы превратить их в "нормальные" модули Объект module имеет свойство rules ( объект с двумя свойствами ):   module     ↪ rules        ↪ test       тип файла модулей (/\.css$/)        ↪ use        загрузчик для файлов этого типа
☑️	plugins	плагины

📌 path

Для разрешения конфликтов маршрутов ( путей ) к различным файлам сборки

первым делом в файле кофигурации webpack ( webpack.config.js )

подключайте встроенный Node.js-модуль path:

const path = require ( 'path' )

Теперь можно использовать глобальную переменную __dirname для получения абсолютного пути к файлу с помощью метода path.resolve

Например, путь к папке build, находящейся в корневой папке приложения:

path.resolve ( __dirname, "build" )

Подключение css-модулей

Для подключения css-файла нужно указать в файле 📝 webpack.config.js

( в объекте конфигурации, в свойстве module )

правило, по которому будут обрабатываться файлы с расширением css

Для этого в свойстве module.rules мы определим значение свойства test

с помощью регулярного выражения: /\.css$/ ( любые файлы с расширением css )

а свойство module.rules.use сделаем массивом, в котором передадим ссылки на загрузчиков:

[  'style-loader',  'css-loader'  ]

📝 webpack.config.js

const path = require ( 'path' )

module.exports = {
   entry: { main: './js/script.js' },
   output: {
      path: path.resolve ( __dirname, 'build' ),
      filename: 'index.js'
   },
   module: {
      rules: [
         {
            test: /\.css$/,
            use: [
               'style-loader',
               'css-loader'
            ]
         }
      ]
   }
}

---

🔗 Regular Expressions

---

module.exports

Для того, чтобы вы понимали, почему в файле 📝 webpack.config.js используется module.exports, и как это работает, нужно понимать следующее:

В Node.js:

✋ module - это объект JS, у которого есть свойство ☝ exports

Если в файле 📝 sourse.js определено свойство module.exports, в любом другом файле ( например, 📝 sample.js ) можно вызвать функцию 🛒 require и передать ей в качестве аргумента имя файла ( "sourse.js" )

Результатом работы функции 🛒 require будет объект, ссылку на который мы поместили в module.exports в файле 📝 sample.js

☕ 1️⃣

📝 script.js

module.exports = {
    hello: function () {
        console.log ( 'Привет, будущие девелоперы!' )
    },
    message: function ( mess ) { console.log ( mess ) }
}

📝 start.js :

let lib = require ( './script.js' )
lib.hello ()
lib.message ( "Вы еще не знакомы с Node.js ?" )

Запустим теперь команду:

npm run start

Результат:

> npm-test@1.0.0 start Z:\home\npm-test
> node start.js

Привет, будущие девелоперы!
Вы еще не знакомы с Node.js ?

🔧 Установка загрузчиков

npm install css-loader style-loader --save-dev

После установки загрузчиков они окажутся в папке 📂 node_modules проекта

⚠️ Обратите внимание, что в файле package.json появилось свойство devDependencies, в котором перечислены установленные нами загрузчики с указанием версии пакета

package.json

🔧 Сборка

👁‍🗨 Вебпак находится в режиме отслеживания наших файлов

Теперь перезагрузите страницу, в которой открыт файл index.html, и вы увидите, что созданный нами файл стилей подключен

Мы можем внести изменения в любой из наших файлов, и эти изменения будут автоматически отображены в файле сборки

Давайте, например, добавим в файл main.css:

img { margin: 40px; border: dotted 2px yellow; }

перезагрузите страницу, и вы увидите изменения