Webpack, Babel - детальное руководство по настройке

Name: Webpack, Babel - детальное руководство по настройке
Rating: 4.3 (15 reviews)

В этом курсе Вы научитесь настраивать проект с нуля. Мы разберём основные фичи Webpack и рассмотрим, как работает Babel

Highest Rated

Created byVasyl Velmyk

Last updated 10/2020

Russian

What you'll learn

Сборка front-end проекта с помощью Webpack
Принцип работы и настройка Babel

Course content

1 section • 8 lectures • 4h 44m total length

Введение в сборку: package.json, npm50:17
В примерах курса используется webpack версии v4.x.x
На момент просмотра последняя версия библиотек может отличаться от той, что в видео. Чтобы работа кода у Вас на компьютере не отличалась от видео, устанавливайте библиотеки с строго указанной версией

Сделать это можно с помощью символа @ названия пакета (например npm install -D webpack@4.41.2).
Версии библиотек, что используются в видео вы можете найти в прикрепленном файле package.json

В прикрепленных ресурсах вы найдете архив с файлами для второго задания первой лекции. Это код приложения Todo List. С ним вы будете работать в нескольких уроках

Для запуска приложения используйте LiveServer (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - расширение для VS Code. Можете использовать и любой другой статический сервер
Babel - настройка, пресеты, плагины28:54
Babel - подключение полифилов19:18
Модули и сторонние библиотеки45:12
Webpack - настройка48:39
Webpack - loaders49:42
Webpack - plugins18:46
Webpack Dev Server23:55

Requirements

Базовые знания JavaScript

Description

В этом курсе вы изучите настройку современного JavaScript Front-End проекта

Конечно, мы не каждый день стартуем новый проект. Но каждый раз, когда все же есть необходимость это сделать - начинается кошмар. Иы ищем готовые конфиги на Stackoverflow, копируем куски настроек из выдачи гугла и тащим кучу непонятных ошибок в консоли. Да, спустя некоторое время (час или день - как повезет), проект заведется! Но в следующий раз процесс будет точно таким же.

У меня подход был именно таким, как описан выше. Точно знаю, что у моих коллег было именно так. В последствии я решил в этом разок основательно разобраться. Разобрался! Вот так получился курс :)

Что Вы изучите в этом курсе?

Что такое Babel
Почему Babel необходим
Почему Babel - это не только переделать ES6+ в ES5
Для чего нужен Webpack
Как его настроить
Что такое webpack лоадеры, как из подключать
Webpack плагины и чем они от лоадеров отличаются
Webpack Dev Server

Who this course is for:

Те, кто хочет наконец разобраться. JavaScript разработчики, которые имеют боль при необходимости настроить сборку проекта, или поправить в ней что-то