Как да завладеете Webpack 4 и да изградите сладко приложение React

Тази статия е остаряла с новата версия на Babel, любезно проверете актуализираната статия „Как да комбинирате Webpack 4 и Babel 7, за да създадете фантастично приложение React“, последно актуализирано на 13 октомври 2018 г.
Образни кредити http://pexels.com Porapak Apichodilok

В тази статия ще разгледам как да настроите приложението React с помощта на Webpack 4. В края на този урок ще знаете как да презаредите горещо приложението си всеки път, когато натиснете ctrl + s във вашия редактор по избор ,

Използвам Visual Studio Code (VS Code) и ми харесва. Тя е лека, гъвкава и най-добрата част е, че е безплатна. Обичам безплатно. Ако не сте го изпробвали, опитайте.

Нашата цел

Нашата цел за този урок е да създадем приложение React, с някои готини функции като async / чакат. В този урок няма да използвам react-router версия 4, защото главно искам да се съсредоточа върху това как да играя с Webpack.

Така че в края на тази статия ще бъдете добри в:

  • Създаване на среда за разработка, с горещо презареждане с помощта на webpack-dev-сървър
  • Добавяне на поддръжка на SCSS и HTML във вашия код с webpack
  • Добавяне на поддръжка за функции като опит / улавяне, асинхронизиране / чакане и почивка на оператора
  • Създаване на производствена конструкция - оптимизирана и готова за внедряване
  • Настройване на различни среди във вашия код, като етап, демонстрация и продукция

Момчета, казвам ви, че ако Webpack изглежда малко трудно, след това вече няма да е така.

Околна среда за развитие

Направете папката

Направете папка, наречена урок в своята директория.

Създайте package.json

Отворете терминала си и влезте в папката с уроци.

Тип:

npm init -y

Това ще създаде файл package.json в папката ви с уроци.

Файлът ще изглежда така:

Ето как първоначално ще изглежда файлът ви package.json. Използвам VS Code за целите на този урок

Създайте файла index.js

Ще създам папка, наречена src в папката ми с уроци.

В папката src ще създам файл, наречен index.js.

и да, ще използвам цитати за звезден път по време на този урок, защото това е СТРАШНО: D

Обединете кода

Знам, че това не е много, но имайте отношение към мен. Нещата ще станат интересни доста скоро.

Сега, за да обединим нашия код, трябва да настроим някои конфигурации, така че Webpack да знае откъде да пакетира кода. За това трябва да инсталираме някои зависимости.

Нека започнем с въвеждане:

npm i --save-dev webpack webpack-cli webpack-dev-server @ babel / core @ babel / preset-env @ babel / preset-react @ babel / preset-stage-2 babel-loader@^8.0.0-beta

ЕХА! Знам, че имаше много зависимости. Нека разберем защо са ни нужни на първо място.

webpack: Имаме нужда от Webpack, за да свържем нашия код.

webpack-cli: Ще използваме някои функции на CLI за Webpack, за да улесним живота си, докато пишем някои скриптове.

webpack-dev-server: Ще създам сървър, използвайки пакета webpack-dev-server. Това е предназначено само да се използва в средата за разработка, а не за производство. Това означава, че докато разработвам и работя над моя код, не ми трябва отделен сървър като Node.js.

@ babel / preset-env: Този пакет се държи точно както @ babel / preset-latest (или @ babel / preset-es2015, @ babel / preset-es2016 и @ babel / preset-es2017 заедно). Готино нали?

@ babel / preset-react: Името на пакета звучи ясно - това ще добави поддръжка за реакция, докато ние групираме нашия код.

@ babel / preset-stage-2: Това ще добави етап-2 функция на предложението Ecma TC39. Можете да прочетете повече за това тук.

@ babel / loader: Това е зависимост на Webpack. Тя позволява прехвърляне на Babel с помощта на Webpack.

@ babel / core: Това е зависимост за самия @ babel / loader.

Така че сега знаете малко за това какво сме инсталирали и защо.

Вашият package.json файл трябва да изглежда така:

Ето как изглежда вашият файл package.json в момента.

Създайте файл Babel

Също така трябва да добавим нов файл, наречен .babelrc, така че нека го създадем също.

В основната си директория папка създайте файл .babelrc и следния фрагмент на код. Това ще помогне на Webpack при групирането на вашия код и преобразуването на онези кодове Sassy, ​​които ще напишем.

Настройте Webpack 4

Добре, така че скучната част е свършена. Нека да преминем към основната част на този урок: настройка на Webpack 4.

За да цитирам от Star Trek:

Той ми възлага задачи. Той ми възлага задачи; и ще го имам. Ще го гоня около луните на Нибия и ще заобикаля вирата на Антарес и ще пламтя пламъците, преди да го предам.

Така че нека създадем нова папка, наречена config и вътре в нея, да създадем файл, наречен webpack.base.config.js.

Причината да наричам този файл .base е, защото съдържа всички общи функции, които ще използваме в нашата разработка и различни производствени среди. Промените в този един файл ще се отразяват във всички среди. Отново, ако това няма смисъл сега, момчета, понесете с мен още няколко минути. Ще започне да има смисъл.

Без допълнително чакане във вашия config / webpack.base.config.js файл напишете тези редове от код:

Module.rules дефинират набора от правила, които Webpack ще се прилага за определени разширения на файлове.

В нашия масив от правила дефинираме тест, който казва на Webpack какво разширение да използва. Тук казвам на Webpack да прилага определено правило само за файлове, базирани на .js.

Следва изключване. Докато групирате, не искам Webpack да прехвърля всичко. Това ще стане много бавно, особено когато включа и папката си node_modules.

Така че ще го изключа, използвайки свойството изключване в набора от правила. Последният, който е най-важният, е свойството use.loader. Тук го давам със стойността на багери-товарач. Това, което работи babel-loader, е да използваме дефинираните си предварително зададени настройки, които сме дефинирали в нашия .babelrc файл, за да транспилираме всички файлове с разширение .js.

Засега толкова добре, нали? Ние сме повече от половината там ...

Дори професор Снейп ви аплодира. Страхотни момчета от работа, почти сме там.

Също така още нещо: Webpack 4 определя src папката като входна точка по подразбиране, а папката dist като стандартна изходна точка на вашия пакетен резултат. Готино, нали?

Отидете в папката си с уроци и стартирайте този скрипт. Това ще свърже целия ви код и ще стартира този код в браузъра:

Adeel @ Frodo MINGW64 ~ / Desktop / article / tutorial
$ node_modules / .bin / webpack-dev-server - разработка на мода --config config / webpack.base.config.js --open --hot --history-api-backback

Основата на този скрипт е, че той ще комбинира целия ни код в директорията src и ще го пусне в браузъра на този адрес:

HTTP: // Localhost: 8080 /
Хм! Това е различно. Това дава грешка: Не мога да получа /

HTML

Така че, когато пуснахме скрипта, който компилира и отвори браузъра. Сега имаше кода, който написахме в нашия index.js файл, но той нямаше .html файл, в който да може да го стартира.

Трябва да добавим html-webpack-плъгин вътре в нашия webpack.base.config.js файл и файл index.html в нашата src директория.

Първо инсталирайте зависимостта за транслиране на HTML с Webpack:

npm i --save-dev html-webpack-plugin

Вашият package.json файл трябва да изглежда така:

Сега нека добавим HTML файл в нашата src директория и го кръстим index.html:

Нашата директория на проекти трябва да изглежда така:

Нашата директория на проекти трябва да изглежда така

Докато сме в това, нека добавим този html-webpack-плъгин в нашия файл webpack.base.config.js.

Така че добавихме нещо ново към нашия конфигурационен файл за уебпакет - забелязахте ли? Просто се забърквам с вас. Знам, че си.

Добри момчета, почти сме свършили.

Сега какво прави този плъгин? Е, много е просто. Плъгини, просто казано, добавете способности към вашия уебпакет. Можете да прочетете повече за тях тук.

Сега добавих точно този един плъгин, наречен html-webpack-plugin. Целта на този плъгин е много проста: той създава HTML файлове, които да обслужват вашите файлове (и) на пакет.

Добре, нека отново стартираме този скрипт (кръстосани пръсти). „Надявам се, че този път няма грешки“, каза веднъж всеки разработчик.

Adeel @ Frodo MINGW64 ~ / Desktop / article / tutorial
$ node_modules / .bin / webpack-dev-server - разработка на мода --config config / webpack.base.config.js --open --hot --history-api-backback

Това ще компилира и отвори браузъра ви в наличния порт по подразбиране. Моят е:

HTTP: // Localhost: 8080 /
Просто щракнах ctrl + shift + i това отвори елемента за проверка в браузъра ми с хром

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

Жълта част: Подчертаната жълта част е твърдо кодираната част, която написахме в нашия index.html файл. Тук ще пребивава нашето бъдещо приложение React.

Червена част: Частта, където подчертах в червено, е най-интересната част. Никога не сме писали това в нашия index.html файл, така че откъде дойде?

Webpack е много умен. Той взе този файл във вашия index.js, сглоби го всичко добре и го добави добре във файла, наречен main.js. След това го инжектира в нашия index.html файл. Супер готино!

Добавете React

Нека добавим React и да започнем партито. За това трябва да инсталираме някои зависимости.

Да започнем с:

npm реагирам react-dom --save

Сега влезте в своя index.js файл и напишете:

Нека отново стартираме този скрипт:

Adeel @ Frodo MINGW64 ~ / Desktop / article / tutorial
$ node_modules / .bin / webpack-dev-server - разработка на мода --config config / webpack.base.config.js --open --hot --history-api-backback

Това ще компилира и отвори браузъра ви в порта по подразбиране. Моят е:

HTTP: // Localhost: 8080 /

Леле, видяхте ли какво се отвори във вашия браузър? Да! Направихте! Първото ви Webpack конфигурирано приложение React.

Сега има още много неща за вършене. Но човек о човече. Добра работа!

Това е нашето приложение за реакция, работещо с Yayyyy! :)

Сега тук е забавната част. Отидете във вашия index.js файл и променете заглавието на всичко по ваш избор. Натиснете ctrl + s и проверете браузъра си. Той автоматично актуализира съдържанието ви.

Готино, нали?

Да резюмираме

Добавихме среда за развитие. Добавихме горещо презареждане на модули. Добавихме поддръжка за .js файлове с React код. В следващата част ще добавим поддръжка на SCSS в нашия уебпакет.

SCSS

За поддръжката на SCSS трябва да добавим още няколко зависимости в нашия package.json файл.

Инсталирайте следните пакети:

npm i --save-dev style-loader css-loader cass-loader sass-loader node-sass extra-text-webpack-plugin@^4.0.0-beta.0

sass-loader: Този плъгин ще ни помогне да съставим SCSS към CSS.

node-sass: sass-loader изисква node-sass като партньорска зависимост.

css-loader: CSS товарачът интерпретира @import и url () като импортиране / изискване () и ще ги разреши.

style-loader: Добавя CSS към DOM чрез инжектиране на стил маркер.

extract-text-webpack-plugin: Той премества всички необходими .css модули в отделен CSS файл.

Така вашите стилове вече не са вградени в пакета с JavaScript, а са в отделен CSS файл (styles.css). Ако общият ви обем на стилове е голям, той ще бъде по-бърз, тъй като пакетът CSS се зарежда паралелно с пакета с JavaScript.

Сега, когато нашите зависимости са инсталирани, нека направим някои промени в нашия конфигурационен файл Webpack.

Нека да разберем първо какво направихме тук В нашия module.rules добавихме ново правило. Това правило прави, е да приложите пакетно свързване към всички .scss файлове. Надявам се, че има смисъл. Вътре в нашата употреба, ние казваме, че извлича малко информация.

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

{
   резервна информация: "стил-товарач",
   use: "css-loader! sass-loader"
}

Опитайте да прочетете това парче код от долу до горе.

Вземете целия SASS код - .scss - с помощта на sass-loader и след това го преобразувайте в CSS код с помощта на css-loader. След това вземете целия този CSS код и го инжектирайте в DOM с етикета