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