Вернуться




Что такое Webpack? Введение для новичков в языке JavaScript




Знать, что такое Webpack, обязан любой разработчик на JS, так как эта технология существенно облегчает разработку приложений на языке программирования JavaScript.

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

 

Для чего нужен Webpack?

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

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

  • мониторить изменения в скриптах;

  • способен «перевести» CoffeeScript в JavaScript;

  • дает возможность использовать дополнительный инструмент для работы с серверной частью приложения — собственный локальный сервер;

  • может разделить собранный «единый файл» на несколько более мелких, чтобы не «перегружать» браузер;

  • применяется при работе с серверной частью приложения, а точнее, с фреймворком Node.JS;

  • и др.

 

Установка и настройка Webpack 

Один из методов установить Webpack — использовать менеджер пакетов. Самый популярный путь это воспользоваться менеджером npm, для этого нужно ввести в консоль:

npm install - - save-dev webpack

 

Для того чтобы наладить работу с этим сборщиком, нужно познакомиться с его основными понятиями:

  1. «Вход». Подразумевает «точку входа» для самого сборщика, то есть откуда ему начать свою «работу».

  2. «Выход». Подразумевает «точку выхода» сборщика и момент, когда ему «выдавать» собранный единый файл из модулей.

  3. «Загрузчики». Данные микроскрипты позволяют Webpack взаимодействовать не только с JS-файлами, так как чистый сборщик воспринимает только язык JavaScript, но и с другими файлами, например, CSS.

  4. Плагин. Сильнее расширяет возможности Webpack. Можно сказать, что плагин — это более крутой загрузчик с более крутой функциональностью. 

 

Заключение

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

А все мы знаем, что любой веб-проект — это множество файлов HTML, CSS, JavaScript, плюс шрифты, изображения и др. Именно Webpack позволяет правильно объединить все эти файлы проекта для их удобной компиляции в браузере, потому что в нем можно настроить так, чтобы он «работал» не только с файлами JavaScript, но и с другими файлами проекта.

Официальная документация по работе с этим сборщиком со множеством руководств и инструкций расположена на официальном сайте проекта: webpack.js.org.

Если по каким-то причинам вам не подошел сборщик модулей Webpack, то можно присмотреться к альтернативным программам из этой группы:

  • Gulp;

  • Browserify;

  • NPM Script;

  • Grunt;

  • и др.



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Представляем вашему вниманию первое занятие учебного курса по React для нач ...

21 Февраля 2021    JavaScript


Учебный курс по React, часть 2: функциональные компоненты

Учебный курс по React, часть 2: функциональные компоненты

 Cегодня мы представляем вашему внимание продолжение курса. Здесь мы погово ...

21 Февраля 2021    JavaScript


Учебный курс по React, часть 3: файлы компонентов, структура проектов

Учебный курс по React, часть 3: файлы компонентов, структура проектов

В этом материале мы поговорим о файлах компонентов и о структуре React-прое ...

21 Февраля 2021    JavaScript




Напишем