Основи збірки Frontend проектів на Webpack

Webpack на даний момент (2024) одним з найпопулярніших збірників проектів разом з Vite. В статті покроково і детально розписано, як зібрати просту посадочну сторінку, використовуючи webpack. Як приклад я роблю просту посадкову сторінку (лендінг) на якій сама практикувалась.

Крок 1 – установка Node.js

Найперше що потрібно мати встановленим – це Node.js та Node Package Manager (npm) – вони обидва встановлюються за раз за цим посиланням https://nodejs.org/en/download/prebuilt-installer/current. При завантаженні можна вибрати потрібні параметри – операційну систему, розрядність і т.п. В даному випадку посилання на Prebuilt Installer.

Щоб перевірити чи установка пройшла правильно, є дві команди для командного рядка, їх вводим по черзі:

node -v 
npm -v

Перша має показати яка версія node.js встановлена на комп`ютері, друга – версію npm.

Крок 2 – створення структури проекту

Загальноприйнята структура проекту – це папка src для розробки, яка містить всі файли проекту з якими ми працюєм (html, css, images, js, і т. п.) . Готовий проект (збірка) поміщається в папку dist (створюється автоматично коли запускається перший раз команда збірки). Ці дві папки містяться в основній папці (директорії) проекту, яка в свою чергу названа по правилам описаним нижче.

Отже для посадочної сторінки (односторінкового сайту) створюєм папку з назвою проекту – ModernLandingPage наприклад. Найкраще називати папки без пробілів, щоб в подальшому нічого не перейменовувати, якщо буде треба працювати з Git. Для того, щоб працювати з папками в Git та збірниках проектів (наприклад, у IDE), важливо дотримуватись певних правил неймінгу папок. Це допоможе уникнути помилок і забезпечити сумісність між різними системами. Ось кілька рекомендацій як правильно називати папки:

Крок 3 – створення нового проекту

Після того як ми створили основну директорію проекту, переходим в неї з командного рядка:

npm init -y

Ця команда створить файл package.json де будуть зберігатись налаштування проекту

Чи потрібно встановлювати Webpack глобально і локально?

Глобальна установка Webpack (необов’язкова і рідко потрібна):

Глобальна установка встановлює Webpack на ваш комп’ютер таким чином, що він доступний з командного рядка з будь-якої директорії.

npm install -g webpack webpack-cli

Коли це потрібно?

Глобальну установку можуть використовувати розробники, якщо вони часто створюють проекти і хочуть мати швидкий доступ до команд Webpack.
Мінуси: Використання глобально встановлених пакетів може призвести до проблем з версіями, особливо якщо в різних проектах потрібні різні версії Webpack. Це може спричинити проблеми з сумісністю.

Крок 4 – Локальна установка

npm install webpack webpack-cli --save-dev

Встановлює Webpack в директорію проекту. Зазвичай, це найкраща практика, оскільки:

• Це забезпечує, що конкретний проект використовує конкретну версію Webpack, необхідну для цього проекту.
• Це дозволяє іншим розробникам, які працюють з вашим проектом, мати ті ж самі версії залежностей без необхідності встановлювати їх глобально.

Детальні пояснення інших варіантів команд для установки Webpack

npm install webnpm install webpack webpack-cli --save-dev

npm install --save-dev webpack

npm install webpack webpack-cli

Отже в нашому випадку встановлюєм Webpack локально використовуючи команду:

npm install webpack webpack-cli --save-dev

Це гарантує, що всі залежності (і webpack, і webpack-cli) встановлені для розробки і не створюють проблем з сумісністю між проектами, тобто:

–save-dev: Вказує, що залежність потрібна тільки під час розробки, і додає її до “devDependencies”.
Без –save-dev: Вказує, що залежність потрібна як під час розробки, так і у продакшені, і додає її до “dependencies”.

Крок 5 – налаштування Webpack для збірки вашого проекту

Досить стандартий проект – стилі написані на scss, які плагін MiniCssExtractPlugin перетворює на css і додає в папку dist. Плагін CopyWebpackPlugin переносить файл reset.css з папки src в папку dist, не змінюючи його.

У головній директорії проекту створюєй файл webpack.config.js вручну або через командний рядок:

touch webpack.config.js

Цей файл буде містити всі налаштування Webpack для вашого проекту:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]',
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/images', to: 'images' },
        { from: 'src/css/reset.css', to: 'css/reset.css' },
      ],
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
    open: true,
    hot: true,
    devMiddleware: {
      writeToDisk: true,
    },
  },
  mode: 'development',
};

Пояснення коніфгурації:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');

Пояснення кожного ключа у конфігурації

Частина коду module.exports = { ... }; є об’єктом, який експортується як конфігурація Webpack. Цей об’єкт містить усі налаштування, які Webpack використовує для процесу збірки нашого проекту. Давайте розглянемо кожен ключ в цьому об’єкті і пояснимо його призначення.

entry: './src/index.js',

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/',
},

module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ],
    },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
      ],
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'images/[name][ext]',
      },
    },
  ],
},

plugins: [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    template: './src/index.html',
  }),
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
  }),
  new CopyWebpackPlugin({
    patterns: [
      { from: 'src/images', to: 'images' },
      { from: 'src/css/reset.css', to: 'css/reset.css' },
    ],
  }),
],

devServer: {
  static: {
    directory: path.join(__dirname, 'dist'),
  },
  compress: true,
  port: 9000,
  open: true,
  hot: true,
  devMiddleware: {
    writeToDisk: true,
  },
},

mode: 'development',

Крок 6 – встановлення залежностей

Встановіть всі необхідні залежності, які ви використовуєте у своєму конфігураційному файлі Webpack, такі як Webpack, плагіни, і лоадери:

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin copy-webpack-plugin
npm install --save-dev css-loader sass-loader style-loader
npm install --save-dev @babel/core @babel/preset-env babel-loader

Тут ми встановлюємо:

• Webpack і webpack-cli: основні пакети для роботи Webpack.
• webpack-dev-server: для роботи локального сервера розробки.
• html-webpack-plugin, clean-webpack-plugin, mini-css-extract-plugin, copy-webpack-plugin: плагіни, які використовуються в конфігурації.
• css-loader, sass-loader, style-loader: лоадери для обробки CSS і SCSS файлів.
• babel-loader, @babel/core, @babel/preset-env: для транспіляції сучасного JavaScript в більш сумісний код.

Крок 7 – перевіряєм чи є всі потрібні файли у проекті

Створіть структуру директорій і файлів для вашого проекту, якщо вони ще не створені, наприклад:

mkdir src
touch src/index.js
touch src/index.html
mkdir src/css
touch src/css/styles.scss
mkdir src/images

• src/: Директорія вихідних файлів вашого проекту.
• src/index.js: Головний JavaScript файл вашого додатку (вхідна точка).
• src/index.html: HTML файл шаблону для HtmlWebpackPlugin.
• src/css/styles.scss: SCSS файл для стилів.
• src/images: Директорія для зберігання зображень.

Дуже важливо правильно розставити файли по папкам щоб у конфігураційному файлі всі шляхи прали правильно, інакше – проект просто не збереться.

Якщо проект містить Javascript, то потрібне налаштування Babel

Якщо ви плануєте використовувати сучасний JavaScript (ES6+), вам потрібно налаштувати Babel. Створіть файл .babelrc у корені проекту:

{
  "presets": ["@babel/preset-env"]
}

Це дозволить Babel транспілювати сучасний JavaScript у сумісний з більшістю браузерів код.

Крок 8 – налаштування npm скриптів

В package.json додайте скрипти для запуску Webpack у режимі розробки або продакшену:

 "scripts": {
    "clean": "rm -rf dist",
    "build": "webpack --mode production",
    "start": "webpack serve --mode development"
  },

Крок 9 – команди керування збіркою

Розробка проекту

Після налаштування всього середовища ви можете почати розробку. Використовуйте команду npm start для запуску локального сервера розробки:

npm start

Webpack DevServer запустить сервер, збиратиме проект в пам’яті і відкриватиме ваш браузер для попереднього перегляду. Всі зміни в ваших файлах (наприклад, JavaScript або SCSS) будуть автоматично відображатися в браузері завдяки гарячому перезавантаженню (Hot Module Replacement, HMR).

Збірка для продакшену

Коли проект буде готовий до розгортання, ви можете зібрати його у режимі продакшену. Використовуйте команду:

npm run build

Ця команда згенерує оптимізовані файли у директорії dist (або іншій директорії збірки), які можна розгортати на сервері.

Перевірка та оптимізація

Перевірте проект після збірки, щоб переконатися, що всі ресурси правильно підключені і працюють.Оптимізуйте кінцеві файли, якщо необхідно (наприклад, зменшення розмірів зображень або файлів JavaScript).

Крок 10 – Розгортання проекту

Після завершення розробки і тестування згенерований проект можна розгорнути на будь-якому веб-сервері або хостинговій платформі. Копіюйте всі файли з папки dist на ваш сервер або використовуйте інші засоби розгортання, такі як FTP, Git, CI/CD тощо.

Підсумок

Після налаштування конфігураційного файлу Webpack, наступними кроками є ініціалізація проекту, встановлення залежностей, створення необхідних файлів і директорій, налаштування Babel (якщо потрібно), налаштування npm скриптів, запуск проекту в режимі розробки, збірка для продакшену, перевірка, оптимізація та розгортання проекту на сервері.

Офіційна документація Webpack https://webpack.js.org/guides/getting-started/#basic-setup