Webpack: въведение
Стигаме и до момента, в който вече ще видим как да добавим webpack към проектите си.
Най-добре е това да се прави за нови проекти. Ако трябва да преправяме стари, към които да се добавя webpack може да се наложи голяма преработка. Ако има ентусиасти за подобно нещо – чувствайте се свободни да опитате. Знайте обаче, че вероятно ще псувате доста.
Аз лично използвам webpack с няколко цели:
- транспилиране на SCSS към CSS
- транспилиране на ESNext към JS
- комбиниране на файловете в един (bundling)
- минифициране на двата крайни .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 основни типа зависимости:
- нужни за да върви крайният вариант на проекта ни
- нужни за разработка на проекта ни
Пример за втория тип са инструменти за транспилиране. След като е готов крайния код – няма нужда да качваме тях на публичен сървър с останалия 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 и опит зареждането им на файла ще покаже грешки.