Webpack ≥ v4 — Пълното ръководство

Част 2: Първи стъпки

Преди всичко:

Това е част 2 от поредицата Webpack ›= v4 The Complete Guide. Ако все още не сте отметнали част 1, моля, направете го първо.

Преди да се потопите:

В тези части от поредицата ще ви взема с мен на разходка из webpack4, опитвайки се да разбера и овладея неговите функции и инструменти чрез различни примери.

Стъпка 1: Инсталиране

Предпоставка:

Уверете се, че имате скорошна стабилна версия на Node.js. Би било по-добре да използвате версията LTS (дългосрочна поддръжка) на Node.js като отправна точка.
Към момента на писане текущата ми инсталирана версия на Node.js е (v8. 12.0).

Моля, изпълнете тази команда, за да проверите вашите:

node -v

О, чакай! Искаме да практикуваме webpack, а не Node.js, нали?! Така че защо изобщо трябва да говорим за Node.js?
Всъщност webpack е просто Node.js приложение. Така че имаме нужда от Node.js, за да го стартираме.

Сега, след като сте инсталирали добре Node.js, нека създадем директория с име “webpack4-demo” и я въведете:

mkdir webpack4-demo
cd webpack4-demo

След това настройте нов npm пакет:

npm init -y

-y ще създаде „webpack4-demo/package.json“ със стойности по подразбиране, без да ви моли да ги замените.

Създайте файл “.gitignore”

Игнорирайте node_modules

Сега ще инсталираме [email protected] локално към зависимостите на разработчиците.
Тъй като [email protected] е текущата версия към момента на писане, ще я инсталирам без да посочвате версията, както е показано по-долу:

npx yarn add webpack -D

В противен случай можете да посочите версията по следния начин:

npx yarn add [email protected] -D

Моля, вземете тази спецификация на версията на пакета, докато инсталирате цялата тази част.

Както се казва в документацията на webpack;ако използвате webpack v4 или по-нова версия, трябва да инсталирате webpack-cli.

webpack-cli е инструментът, използван за стартиране на webpack от командния ред.

Така че ще инсталираме [email protected] локално:

npx yarn add webpack-cli -D

Бележки:

• Можете да използвате всеки мениджър на пакети, който отговаря на вашите нужди.
• npx е програма за стартиране на пакети за npm, която идва с [email protected] и [email protected] или по-нови версии. npx тук ще инсталира Yarn, ако все още не е инсталиран в машината, след това ще инсталира пакети, използващи Yarn и ще завърши премахването на Yarn от машината (ако е инсталиран от npx).

Стъпка 2: Основна настройка

В тази стъпка ще напишем изходния код.

Нека създадем:
директория с име: “webpack4-demo/src”
файл с име: “webpack4-demo/src/index.js”

Тази “webpack4-demo/src” директория ще съдържа целия изходен код, който ще напишем и ще бъде пакет с помощта на webpack.

Нашият пример ще използва библиотека lodash, така че нека я инсталираме локално като зависимост:

npx yarn add lodash

Сега нека напишем този код във файла “webpack4-demo/src/index.js”

Стъпка 3: Генериране на пакети

В тази стъпка ще генерираме пакета.

Нека първо създадем:
директория с име: “webpack4-demo/dist”

Тази директория“webpack4-demo/dist” ще съдържа пакета, който ще бъде генериран от webpack, нека го обозначим с “webpack4-demo/dist/ main.js”.

За да използвам генерирания пакет “webpack4-demo/dist/main.js” и да го заредя в браузъра, ще създам ръчно (по-късно това е webpack който ще направи това автоматично, като конфигурира включване — Моля, имайте търпение! — ) HTML файл с име “webpack4-demo/dist/index.html” и извикайте “webpack4-demo/dist/main.js” в таг на скрипт в него, както е показано по-долу:

Не забравяйте, моля, git игнорирайте “webpack4-demo/dist/main.js”, но не го правете за “webpack4-demo/dist /index.html”, тъй като все още не се генерира автоматично от webpack.

Вече сте готови да генерирате първия си пакет с помощта на webpack. За да направите това, трябва да изпълните тази команда:

npx webpack

Поздравления =D

Забележка: Тук npx използва двоичния файл на пакета webpack, който вече сме инсталирали в стъпка 1.

Предполагам, че всичко върви добре за вас и получавате пакета с име “webpack4-demo/dist/main.js”.

Забележка: “webpack4-demo/dist/main.js” е минимизиран и оптимизиран изходен JavaScript файл, генериран от webpack с помощта на неговата графика на вътрешни зависимости, както е обяснено в част 1 от тази серия.

Ключови думи, които си струва да имат собствено обяснение:

• Минимизирани в смисъл, че всички бели интервали ще бъдат премахнати и всички променливи, функции, имена на класове ще бъдат минимизирани.
• Оптимизиран в много и много значения, като пример, когато скрипт не трябва да се зарежда във всички случаи в браузъра, webpack ви позволява да конфигурирате нещо, наречено Мързеливо зареждане, така че той обединява този скрипт в свой собствен пакет и го зарежда при необходимост, завършвайки чрез намаляване проблема с тесните места в мрежата, който вече беше споменат в част 1 на това серия.

Ще видим отложено зареждане и много повече по-късно в тази серия.

Бележки:

• Зависимости, като lodash в нашия случай, ще бъдат пакетирани от webpack в допълнение към “webpack4-demo/src/index.js”.
• DevDependencies, като webpack и webpack-cli в нашия случай, няма да бъдат групирани от webpack, тъй като тяхното (DevDependencies) използване е ограничено до средата за разработка.

Както разбрахте, не сме конфигурирали нищо, за да позволим на синтаксиса за импортиране да работи в “webpack4-demo/src/index.js” до import _ from ‘lodash’ и това е защото поддръжката на webpack Импортиране и експортиране на модули на JavaScript и JSON от кутията. Използвам възможността да спомена, че с помощта на синтаксиса за импортиране на webpack стигаме до преодоляване на проблема със сблъсъците на обхвата (без глобално замърсяване на обхвата).

Но чакайте, как webpack знае как трябва да групира нашия проект, без да задава нито входния файл, откъдето трябва да започне групирането, нито изходното местоположение, където трябва да излъчва генерирания пакет?

Е, по подразбиране, когато стартираме webpack в главна папка на проект, без да му даваме никакви CLI (Интерфейс на командния ред) аргументи, той ще генерира пакета, като вземе “webpack4-demo/src/index.js” като входна точка и “webpack4-demo/dist/main.js ” като изход.

Накрая отворете “webpack4-demo/dist/index.html” в браузъра си и трябва да видите бутон, когато щракнете върху него, той предупреждава “Здравей webpack4”.

Бележки:

• Освен синтаксис за импортиране и експортиране, webpack поддържа и други различни, като например изискване.
• Старите браузъри не са с актуални функции на ES2015 (EcmaScript2015). Както вероятно разпознахте, използвахме в “webpack4-demo/src/index.js” функция на ES2015, която е синтаксис на функцията стрелка (args)=>{body function code} . Нашият пакет няма да успее да се изпълни в тези стари браузъри. За да ги поддържаме, трябва да транспилираме кода ES2015 или по-високи версии на ES (ECMAScript) в ES5 (ECMAScript 2009), тъй като това е версията, която се поддържа най-много от голям брой браузъри, включително тези стари. За да направим това, трябва да конфигурираме transpiler като Babel чрез зареждачи на webpack (ще видим и това по-късно в тази серия).

Стъпка 4: Използване на конфигурационен файл

Както видяхме, webpack4 не изисква никаква конфигурация за групиране на вашия проект и използва конфигурация по подразбиране за това. Но в повечето случаи трябва да заменим тази конфигурация по подразбиране, докато конфигурациите на webpack на проекти са по-сложни от простото запазване на тази по подразбиране. Можем да заменим тази конфигурация по подразбиране, като използваме CLI на webpack или като създадем конфигурационен файл на webpack. Използването на едно или друго зависи от контекста и сложността на проекта. В повечето случаи използването на конфигурационен файл е по-ефективно, тъй като е лесно за поддръжка, за разширяване и за четене .

И така, нека създадем нашия конфигурационен файл за webpack с име “webpack4-demo/webpack.config.js”, който прави същата конфигурация за групиране като тази по подразбиране:

Сега нека генерираме нашия пакет, като използваме нашия нов конфигурационен файл, както е показано по-долу:

npx webpack --config webpack.config.js

И ако зададете всички неща на правилното място, както направих аз, трябва да видите вашия пакетен файл с име “webpack4-demo/dist/main.js” успешно генериран и можете да го тествате, като отворите файла “webpack4-demo/dist/index.html” в браузъра.

Бележки:

• Ако вашият конфигурационен файл на webpack е наименуван като “webpack.config.js”, тогава той ще бъде избран по подразбиране от webpack, дори ако не го споменавате чрез аргумента на командата --config.
• Можете да наименувате конфигурационния файл на вашия webpack с произволно име, но трябва да го споменете чрез аргумент --config, за да бъде взето предвид от webpack.
• Можете да имате повече от един конфигурационен файл на webpack (напр. един за среда за разработка, друг за среда за производство и т.н.).

Стъпка 5: Използване на npm скрипт

Както казах по-горе (когато дадох бележка за npx в стъпка 1), командата npx webpack --config webpack.config.js използва зависимостта за разработка на webpack, инсталирана в нашия проект. Можем да използваме този двоичен файл (webpack) директно с помощта на npm скрипт без да преминаваме през npx. По този начин няма да се налага да пишете --config ръчно (ако е необходимо) през цялото време, а вместо това да го напишете веднъж.

И така, нека модифицираме нашия package.json, както е показано по-долу:

Забележка: Позоваването на инсталирани пакети с помощта на npm скриптове е най-добра практика, защото позволява на всички сътрудници на проекта да използват една и съща версия на пакети.

npx yarn run build