Webpack: въведение

Стигаме и до момента, в който вече ще видим как да добавим webpack към проектите си.

Най-добре е това да се прави за нови проекти. Ако трябва да преправяме стари, към които да се добавя webpack може да се наложи голяма преработка. Ако има ентусиасти за подобно нещо — чувствайте се свободни да опитате. Знайте обаче, че вероятно ще псувате доста.

Аз лично използвам webpack с няколко цели:

  1. транспилиране на SCSS към CSS
  2. транспилиране на ESNext към JS
  3. комбиниране на файловете в един (bundling)
  4. минифициране на двата крайни .CSS и .JS файла

Инициализиране на проект и инсталиране на webpack

Node.JS

Първо трябва да уточним, че webpack е разработен с Node.JS, така че първо трябва да си изтеглите и инсталирате него.

Идете на https://nodejs.org/en/ и го изтеглете. Най-добре да си вземете LTS (long-term support) версията, а не “Current”. LTS е само малко по-стара, но много по-стабилна. Редовно с излизане на по-нов current се пуска и по-нов LTS, така че не се притеснявайте, че е outdated.

Инсталирайки си Node.JS през конзолата вече ще можете да викате и npm команди.

Можете да ползвате и Command Prompt на Windows, но съветвам да си инсталирате CygWin или друг емулатор за *NIX команди.

*NIX конзола

От настройките на Windows 10 можете да си включите пълен Ubuntu Bash, който включва цялостна Linux Ubuntu конзола. Можете даже да си инсталирате програми с apt-get install. За повече информация как да направите това можете да прочетете Ubuntu Bash on Windows 10 overview (setup, shortcomings, making it better and verdict);

Аз лично предпочитам bash конзолата, която идва при инсталиране на Git за Windows.

Някои мои колеги от работа пък харесват ConEmu.

npm

Първо си създайте нова папка на локалния си сървър. Отворете конзолата и се уверете, че сте навигирали до тази папка. Напишете npm init за да инициализирате нов проект.

Ще започне процес, който ви пита за основна информация за проекта ви. Както ще въведете няма особено голямо значение. Само името да не съвпада с някой публичен проект (гледайте да е уникално).

Като резултат в папката ще се създаде нов файл с име package.json с подобно съдържание:

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Зависимости (dependencies)

След като вече имаме проект трябва да си инсталираме и така наречените “зависимости”. Това са инструменти / библиотеки, чиято функционалност ще използваме в проекта си.

Има 2 основни типа зависимости:

  1. нужни за да върви крайният вариант на проекта ни
  2. нужни за разработка на проекта ни

Пример за втория тип са инструменти за транспилиране. След като е готов крайния код — няма нужда да качваме тях на публичен сървър с останалия source code.

Инсталиране на webpack dev dependency

Напишете npm install webpack --save-dev.

  • install е npm подкомантада да инсталиране на нов модул.
  • webpack е името на модула, който искаме да инсталираме
  • --save-dev указва, че това е зависимост за разработка, а не за крайния проект сам по себе си

Към package.json файла трябва да са се добавили следните редове:

"devDependencies": {
    "webpack": "^4.29.6"
}

Структура на файловете

Нека в папката създадем следната файлова структура:

webpack-project
|-dist
|-src
| |-js
| | `-functions.js
| `-scss
|   `-style.scss
`-index.html

Иначе казано:

  • в папката на проекта да имаме index.html
  • да имаме и празна папка dist
  • да има още една папка с име src
  • в последната да има още 2 папки: js и scss
  • в js да имаме файл с име functions.js
  • в папка scss да има файл с име style.scss

В папка dist ще бъдат записани файловете, които webpack ще генерира на базата на кода ни от src.

Код за index.html

Съдържанието на този файл може да е просто:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>webpack test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="dist/style.bundle.css" />
</head>
<body>
    <script src="dist/functions.bundle.js"></script>
</body>
</html>

Не се притеснявайте, че все още не съществуват файлове dist/style.css и dist/functions.bundle.js и опит зареждането им на файла ще покаже грешки.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.