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

Содержание

  • 1. Что такое webPack?
  • 2. Что такое сборщик?
  • 3. Зачем мне нужен упаковщик?
  • 4. Как использовать Webpack

Итак, начнем!

Что такое Webpack?

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

Итак, что такое упаковщик? и зачем мне нужен упаковщик? почему я не могу использовать обычный код JS?

Что такое сборщик?
Сборщик – это инструмент, который собирает воедино весь ваш код JavaScript и его зависимости и создает новый код JavaScript. выходной файл. как насчет пакетов (пакетов npm), которые мы не используем, будут ли они объединены или нет? Таким образом, ответ — нет, они не будут. Если вы не импортируете пакет, упаковщик не будет его объединять.

Упаковщик создает граф зависимостей для отслеживания, и все, что нам нужно сделать, это указать точку входа нашего проекта. Например, если App.js является нашей точкой входа, упаковщик просканирует файл на наличие зависимостей, а затем просканирует каждый из полученных файлов зависимостей, чтобы создать граф. Это очень важно — без этого браузер не знал бы, где искать любой модуль, который мы используем в нашем проекте, а также он объединяет все файлы CSS в один минифицированный файл. Активы, такие как изображения, шрифты и т. д., также отображаются и объединяются для лучшей производительности.

Зачем мне нужен упаковщик? Почему я не могу использовать обычный код JS?
Представьте, что вы создаете веб-приложение, состоящее из нескольких файлов JavaScript.

<html>
<script src="/src/foo.js"></script>
<script src="/src/bar.js"></script>
<script src="/src/action.js"></script>
<script src="/src/services.js"></script>
<script src="/src/utils.js"></script>
</html>

Но в этом случае каждый файл будет делать отдельные HTTP-запросы, что приводит к пяти запросам на загрузку всего, что нужно приложению для работы. Чтобы избежать этого, мы можем объединить их в один файл, который включает в себя все эти файлы.

<html>
<script src="/src/bundle.js"></script>
</html>

Таким образом, включить все эти файлы в один файл js слишком сложно, а управлять ими вручную — непростая задача. Предположим, вам нужно управлять ими и каким-то образом объединять все без каких-либо конфликтов имен или проблем с областью действия после того, как вы потратили слишком много часов на его создание. Но в этом случае этот файл увеличит время загрузки нашего веб-сайта, потому что все объединено неоптимизированным образом. Сборщик — это инструмент разработчика, который устраняет все проблемы, экономит время и оптимизирует наше приложение для достижения наилучшей производительности, в основном это минимизированный файл. а Webpack — один из самых популярных бандлеров.