Настройка Webpack для быстрой front-end разработки


Содержание

Настройка Webpack для быстрой front-end разработки [GeekBrains]

Смотреть видео Настройка Webpack для быстрой front-end разработки [GeekBrains] онлайн, скачать на мобильный.

335 | 17
Образовательный портал GeekBrains | 2 год. назад

Начни карьеру с бесплатного курса «Основы программирования» https://goo.gl/jTP4nP

На вебинаре мы рассмотрим применение компоновщика Webpack для сборки всех необходимых файлов front-end проекта перед публикацией.

Вы увидите, как установить и настроить Webpack с нуля, а также создать свой «шаблон для старта».

Вы узнаете:
— Что такое Webpack и как его установить.
— Как грамотно настроить среду разработки.
— Как установить дополнительные модули (jQuery, Bootstrap).
— С помощью каких инструментов оптимизировать код.
— Как автоматизировать сжатие изображений.
— Как подключить препроцессоры CSS.
— Как создать репозиторий для быстрого старта.

В-первую очередь материал рассчитан на новичков, которые хотят попробовать Webpack и научиться собирать front-end проекты.

#webpack #frontendразработка #geekbrains #программирование #курсыпрограммирования

Что такое Webpack? Современные инструменты frontend-разработчика

Всех приветствую, с вами Сергей Никонов и в этом уроке я расскажу про Webpack.

Итак, что же такое Webpack?

Webpack — это инструмент для сборки современных frontend-приложений.
В настоящий момент, по популярности, Webpack опережает похожие инструменты, такие как Gulp и Grunt.

Логика работы очень простая, но для того, чтобы понять какие задачи решает Webpack, вам необходимо понимать из чего состоит современное веб-приложение.

Смотрите видео Что такое Webpack

Дело в том, что современное веб-приложение может состоять из достаточно большого количества файлов и может быть написано с помощью современного JavaScript и различных препроцессоров, например SASS и других.

Браузеры пока в полной мере не поддерживают эти технологии и по этой причине, для преобразования кода на современном JavaScript в JavaScript ES5 и перевода кода из SASS в css и многих других задач, используются дополнительные инструменты, такие как webpack.

Когда вы один раз настроите Webpack для вашего фронтенд приложения, вебпак будет автоматически выполнять все рутинные задачи, а вам останется только наслаждаться написанием вашего кода!

В конечном итоге, используя Webpack, вы будете получать две версии вашего проекта: Первая — это исходный код, который вы будете писать с помощью современного javascript и использовать другие удобные инструменты и вторая версия вашего веб-приложения — это преобразованный код для публикации на хостинг. Как на схеме ниже:

При этом, если исходный код вашего веб-приложения будет состоять из большого количества файлов и компонентов, то для публикации вашего веб-приложения на хостинг, в результате преобразования, вы получите всего несколько файлов, при этом, webpack можно настроить таким образом, чтобы он сжимал весь конечный код и даже автоматически оптимизировать изображения вашего проекта.

Это позволяет сокращать размер вашей страницы и в итоге ваше веб приложение будет загружаться у пользователей быстрее. А быстрая загрузка сайта — один из важнейших факторов для успешного продвижения сайта.

Более того, вы можете настроить webpack таким образом, что когда вы вносите изменения в ваш код, он будет на лету преобразован в код для публикации, а также страница в браузере будет автоматически обновлена.

Цукерберг рекомендует:  Проект - Что актуально в сфере IT в настоящее время


В следующих уроках я покажу как настроить webpack для вашего проекта. Так же с помощью webpack мы интегрируем Babel JS в наш проект, для написания кода на современном javascript.

Это один из уроков большого курса по современному Javascript.

Введение в Webpack для новичков

Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.

При большом количестве файлов он создает один объемный файл (или несколько файлов) для запуска вашего приложения.

Он также способен выполнять множество иных операций:

  • помогает собрать воедино ваши ресурсы
  • следит за изменениями и повторно выполняет задачи
  • может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
  • может выполнить транспиляцию CoffeeScript в JavaScript
  • может конвертировать встроенные изображения в data:URI
  • позволяет использовать require() для CSS файлов
  • может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
  • может работать с Hot Module Replacement (замена горячего модуля)
  • может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
  • может выполнить Tree Shaking

Webpack не ограничивается одним лишь фронтендом, его также успешно применяют в бэкенд разработке на Node.js.

У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.

Webpack — это более целенаправленный инструмент. Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами

Изучите Webpack за 15 минут

Дата публикации: 2020-05-10

От автора: инструменты сборки стали неотъемлемой частью веб-разработки в основном из-за сложности JS-приложений. Сборщики позволяют запаковывать, компилировать и организовывать множество файлов и библиотек, необходимых в современных веб-проектах. В этом уроке мы расскажем вам про webpack, мощный open-source сборщик и препроцессор, умеющий выполнять большое количество разных задач. Мы научим вас писать модули, собирать код, а также использовать некоторые плагины загрузки. Урок написан для людей, абсолютно не знакомых с webpack. Однако рекомендуется иметь малейшие знания JS.

Почему именно webpack?

Как и в любом другом аспекте веб-разработки, здесь нет стандарта, какой инструмент сборки использовать. В настоящее время у разработчиков есть выбор между webpack, Gulp, Browserify, NPM scripts, Grunt и еще 10 инструментами. В сети есть много подробных сравнений, однако все инструменты очень похожи. В большинстве случаев выбор зависит от личных предпочтений и проекта, над которым вы сейчас работаете.

Ниже приведены плюсы и минусы, чтобы вы могли решить, подходит ли вам webpack или нет:

Плюсы:

отлично подходит для работы с одностраничными приложениями;

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения


принимает модульный синтаксис require() и import;

позволяет продвинуто разбивать код;

горячая перезагрузка для более быстрой разработки с React, Vue.js и похожими фреймворками;

по данным JS-опроса за 2020 это самый популярный запаковщик.

Минусы:

не подходит новичкам в веб-разработке;

сначала принцип работы с CSS-файлами, изображениями и другими не JS ресурсами кажется запутанным;

документация могла быть и лучше;

часто изменяется, большая часть уроков за 2020 уже устарела.

Установка

Проще всего установить webpack через пакетный менеджер. Мы будем использовать npm, но вы можете взять Yarn или другой менеджер. В обоих случаях вам понадобится Node.js и готовый package.json.

Рекомендуется ставить webpack локально (без флага –g), чтобы у всех, кто работает с вашим проектом, была одна версия

Настройка Webpack для быстрой front-end разработки [GeekBrains]

Смотреть видео Настройка Webpack для быстрой front-end разработки [GeekBrains] на v4k бесплатно

306 | 16
Образовательный портал GeekBrains | 2 год.

Начни карьеру с бесплатного курса «Основы программирования» https://goo.gl/jTP4nP

Цукерберг рекомендует:  Java – все, что нужно знать о коллекциях

На вебинаре мы рассмотрим применение компоновщика Webpack для сборки всех необходимых файлов front-end проекта перед публикацией.

Вы увидите, как установить и настроить Webpack с нуля, а также создать свой «шаблон для старта».

Вы узнаете:
— Что такое Webpack и как его установить.
— Как грамотно настроить среду разработки.
— Как установить дополнительные модули (jQuery, Bootstrap).
— С помощью каких инструментов оптимизировать код.
— Как автоматизировать сжатие изображений.
— Как подключить препроцессоры CSS.
— Как создать репозиторий для быстрого старта.

В-первую очередь материал рассчитан на новичков, которые хотят попробовать Webpack и научиться собирать front-end проекты.

#webpack #frontendразработка #geekbrains #программирование #курсыпрограммирования


Настройка Webpack для быстрой front-end разработки [GeekBrains]

Rādīt atskaņotāja vadīklas

  • Publicēšanas datums 3 apr 2020
  • Начни карьеру с бесплатного курса «Основы программирования» goo.gl/jTP4nP
    На вебинаре мы рассмотрим применение компоновщика Webpack для сборки всех необходимых файлов front-end проекта перед публикацией.
    Вы увидите, как установить и настроить Webpack с нуля, а также создать свой «шаблон для старта».
    Вы узнаете:
    — Что такое Webpack и как его установить.
    — Как грамотно настроить среду разработки.
    — Как установить дополнительные модули (jQuery, Bootstrap).
    — С помощью каких инструментов оптимизировать код.
    — Как автоматизировать сжатие изображений.
    — Как подключить препроцессоры CSS.
    — Как создать репозиторий для быстрого старта.
    В-первую очередь материал рассчитан на новичков, которые хотят попробовать Webpack и научиться собирать front-end проекты.
    #webpack #frontendразработка #geekbrains #программирование #курсыпрограммирования

komentāri • 33

А ссылка на github есть?

Не работает npm init -y на win выдает ошибку
PS D:\Fullstack Development Test> npm init -y
npm ERR! Invalid name: «»
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\U\AppData\Roaming\npm-cache\_logs\2020-08-24T20_16_53_213Z-debug.log

В целом материал еще годный, хотя некоторые вещи уже устарели, и не работают (например, в new CleanWebpackPlugin() уже не нужно указывать папку для 4й версии Вебпака). Качество картинки ниже среднего.

Если не подгружаются изображения попробуйте добавить npm install postcss-cli autoprefixer

Пришел сюда, т.к. у меня выскакивала вечно ошибка на ПК, хотя на ноуте все верно было настроенно. Думал , что что-то не так делаю. Все делаю по шагово, как Вы на видео рассказали. Но на моменте 52:30, когда запускаю npm run build, у меня выскакивает ошибка «npm ERR!» и там много текста, сюда не влезет. ВОзможно ли как-то подсказать, ка крешить эту проблему?

Нашел решение проблемы. Вдруг кому-то пригодится «npm i -D extract-text-webpack-plugin@next», без ковычек

Поставил дизлайк только из-за излишне затянутого по времени курса (вся информация легко передается за 20-30 минут) и мелкого шрифта.

Кроме английского и фреймворка остальное правда, джун на то и джун чтобы ему сказали вот мы работаем на вью давай месяц испытательный периуд подучи его, или любой другой который мб вообще не популярен и ты про него первый раз слышишь, или вообще их индивидуальная разработка.
Английский тоже хз зачем в России нужен на уровне разговорного, тока секретаршам мб, а на уровне погуглить на английском это скил без которого даже верстку учить не нужно начинать.

Настройка Webpack для быстрой front-end разработки [GeekBrains]

Видео на тему: настройка webpack для, начни карьеру с бесплатного курса. А также всё о SMM и SEO продвижении, раскрутки и оптимизации сайтов с помощью программ.

Описание видеоролика от Образовательный портал GeekBrains: Начни карьеру с бесплатного курса \»Основы программирования\» На вебинаре мы рассмотрим применение компоновщика Webpack для сборки всех необходимых файлов frontend проекта перед публикацией. Вы увидите как установить и настроить Webpack с нуля а также создать свой «шаблон для старта». Вы узнаете Что такое Webpack и как его установить. Как грамотно настроить среду разработки. Как установить дополнительные модули (jQuery Bootstrap). С помощью каких инструментов оптимизировать код. Как автоматизировать сжатие изображений. Как подключить препроцессоры CSS. Как создать репозиторий для быстрого старта. Впервую очередь материал рассчитан на новичков которые хотят попробовать Webpack и научиться собирать frontend проекты. #webpack #frontendразработка #geekbrains #программирование #курсыпрограммирования Источник контента находится по адресу youtube.com/watch?v=Vqple_TvaQA прямо от туда и подгружается ролик вашим браузером.

Цукерберг рекомендует:  #начинающий #ноль #чайник - Начинаю с полного нуля

Этот материал был загружен на основной видеосайт пользователем «Образовательный портал GeekBrains» в свой канал 2 год. тому назад, его уже просмотрели 15, 537 раз. Контент понравился 335 и не понравился 17 посетителям сайта. А что вы думаете об этой работе? Напишите своё мнение чуть ниже, давайте обсудим! Ещё интересные, полезные и обучающие видеоматериалы по темам: captcha bot , бесплатный хостинг крмп , реклама в аудио вк , а также на многие другие темы тут или на https://xrumer.net/v/HFI6yg0jJUc/Факторы-влияющие-на-продвижение-сайта-в-поисковиках .

Хотите увидеть другие работы этого автора? У нас есть и другое видео от пользователя Образовательный портал GeekBrains, которые тоже опубликованны в его канале https://xrumer.net/s/Образовательный+портал+GeekBrains, а также другие аналогичные видеокурсы о том, как выбрать движок, создать и раскрутить сайт, сделать массовую рассылку, привлечь много клиентов и т.д. Смотреть видео про домены, хостинг, создание сайта, оптимизацию, продвижение, рекламу и интернет-заработок можно онлайн, бесплатно и без регистрации.

Рекомендуем добавить сайт и данную страничку в закладки браузера, чтобы можно было быстрее найти наш ресурс.


ВидеоГид 24

сборник популярных видео

Настройка Webpack для быстрой front-end разработки [GeekBrains]

Начни карьеру с бесплатного курса «Основы программирования» https://goo.gl/jTP4nP

На вебинаре мы рассмотрим применение компоновщика Webpack для сборки всех необходимых файлов front-end проекта перед публикацией.

Вы увидите, как установить и настроить Webpack с нуля, а также создать свой «шаблон для старта».

Вы узнаете:
— Что такое Webpack и как его установить.
— Как грамотно настроить среду разработки.
— Как установить дополнительные модули (jQuery, Bootstrap).
— С помощью каких инструментов оптимизировать код.
— Как автоматизировать сжатие изображений.
— Как подключить препроцессоры CSS.
— Как создать репозиторий для быстрого старта.

В-первую очередь материал рассчитан на новичков, которые хотят попробовать Webpack и научиться собирать front-end проекты.

#webpack # frontendразработка #geekbrains #программирование #курсыпрограммирования

Настройка Webpack для быстрой front-end разработки [GeekBrains]

Начни карьеру с бесплатного курса «Основы программирования» https://goo.gl/jTP4nP

На вебинаре мы рассмотрим применение компоновщика Webpack для сборки всех необходимых файлов front-end проекта перед публикацией.

Вы увидите, как установить и настроить Webpack с нуля, а также создать свой «шаблон для старта».

Вы узнаете:
— Что такое Webpack и как его установить.
— Как грамотно настроить среду разработки.
— Как установить дополнительные модули (jQuery, Bootstrap).
— С помощью каких инструментов оптимизировать код.
— Как автоматизировать сжатие изображений.
— Как подключить препроцессоры CSS.
— Как создать репозиторий для быстрого старта.

В-первую очередь материал рассчитан на новичков, которые хотят попробовать Webpack и научиться собирать front-end проекты.

#webpack #frontendразработка #geekbrains #программирование #курсыпрограммирования

Настройка Webpack для быстрой front-end разработки [GeekBrains]

Смотреть видео Настройка Webpack для быстрой front-end разработки [GeekBrains] на Smotri.City бесплатно

306 | 16
Образовательный портал GeekBrains | 2 год.

Начни карьеру с бесплатного курса «Основы программирования» https://goo.gl/jTP4nP

На вебинаре мы рассмотрим применение компоновщика Webpack для сборки всех необходимых файлов front-end проекта перед публикацией.

Вы увидите, как установить и настроить Webpack с нуля, а также создать свой «шаблон для старта».

Вы узнаете:
— Что такое Webpack и как его установить.
— Как грамотно настроить среду разработки.
— Как установить дополнительные модули (jQuery, Bootstrap).
— С помощью каких инструментов оптимизировать код.
— Как автоматизировать сжатие изображений.
— Как подключить препроцессоры CSS.
— Как создать репозиторий для быстрого старта.

В-первую очередь материал рассчитан на новичков, которые хотят попробовать Webpack и научиться собирать front-end проекты.

#webpack #frontendразработка #geekbrains #программирование #курсыпрограммирования

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих