Webpack - почему и как
Не позволяйте себе запутаться все модные вещи Webpack делает. Что такое Webpack? Ну, это модуль-расслоение, идем туда. Просто шучу, это совсем не говорит новичкам. Я считаю, что важно, чтобы получил webpack, поэтому основная часть этого ответа будет сосредоточена на этом.
В его основе Webpack позволяет использовать модули javascript в нашем браузере, взяв несколько файлов и активов и объединив их в один большой файл, как показано ниже на этом изображении, из новых документов для Webpack 2.
Все дополнительные блестящие вещи, такие как transpiling ES6/7 к ES5 или позволяют нам использовать CSS модули являются просто красивыми дополнительными обеспечиваемыми нам Webpack.
Мощная экосистема плагинов и дополнений Webpack делает Webpack показаться запутанной, как представляется, так много. В то время как дополнительные функции, предоставляемые нам через плагины, великолепны, нам нужно сосредоточиться на основной причине. Существует веб-пакет - комплект модулей. Поэтому загрузчики и плагины выходят за рамки этого обсуждения на высоком уровне по фундаментальной проблеме, которую помогает Webpack.
Webpack - это инструмент командной строки для создания пакетов активов (кода и файлов). Webpack не запускается на сервере или в браузере. Webpack берет все ваши файлы javascript и любые другие активы и преобразует их в один огромный файл.
Этот большой файл затем может быть отправлен сервером в браузер клиента. Помните, что браузеру и серверу все равно, что этот большой файл был создан с помощью Webpack, он просто рассматривает его как любой другой файл.
WebPack-DEV-сервер против WebPack кли
WebPack-DEV-сервер представляет собой принципиально отличается от инструмента WebPack Cli (инструмент командной строки), описанной выше. Это сервер разработки, который работает на узле/экспресс.Когда этот сервер работает, мы загружаем наше приложение из одного из портов на этом сервере разработки, и при разработке нашего приложения мы можем получить доступ к дополнительным функциям, что облегчает нашу жизнь, например, перезагрузку и автоматическое переадресацию модулей (запускает webpack cli, чтобы автоматически связывать файл изменения). Преимущество перезагрузки горячего модуля заключается в том, что мы можем поддерживать приложение и внедрять новые версии файлов, которые редактируются во время выполнения. Поэтому мы можем видеть, какие изменения в некоторых файлах в приложении выглядят, не теряя состояния всего приложения.
The Why
Традиционные сервера визуализации приложения
Традиционно приложения были на стороне сервера визуализации. Это означает, что запрос выполняется клиентом на сервере, и вся логика находится на сервере. Сервер выталкивает статическую html-страницу обратно клиенту, что они видят в своем браузере. Вот почему всякий раз, когда вы перемещаетесь по старым приложениям на стороне сервера, вы увидите, что страница вспыхивает, когда она обновляется.
одностраничное приложение - ООР
Однако в настоящее время приложение одной страницы в моде. На одностраничном приложении наше приложение закрывается окнами в одном URL-адресе, и нам не нужно обновлять его. Это считается более приятным для пользователя, поскольку он чувствует, что slicker не нуждается в обновлении. В SPA-центрах, если мы хотим перейти от дома, чтобы сказать страницу с подписью, мы перейдем к URL-адресу страницы с подписью. Однако, в отличие от традиционных страниц на стороне сервера, когда браузер клиентов делает этот запрос, страница не обновляется. Вместо этого приложение будет динамически обновлять себя, чтобы отображать содержимое signin. Хотя это выглядит как отдельная страница в нашем приложении с одной страницей, наше приложение просто динамически обновляет для разных страниц.
Динамические ООР означают больше кода в браузере
Так в ООР со всем этим динамическим контентом есть способ более Javascript код, который находится в браузере. Когда мы говорим динамически, мы имеем в виду количество логики, которая живет в браузере клиентов в виде javascript. Наши приложения на стороне сервера выставляют статические страницы, которые не являются динамическими. Динамизм все происходит на сервере при создании статической страницы, но как только он попадает в браузер является относительно статичным (там не много JavaScript в нем)
Как
Управляющий это новое изобилие логики браузера, то есть больше Javascript
Webpack был разработан в первую очередь для того, чтобы справиться с появляющейся тенденцией иметь все больше и больше javascript в клиенте.
Итак, у нас есть много JavaScript в браузере, почему это проблема?
Нам нужно разбить код на несколько файлов на клиенте, так что приложение легче работать на
Ну где же мы помещаем все это? Мы можем поместить все это в один большой файл. Однако, если мы сделаем это, это будет кошмар, чтобы пробраться через него и понять, как работают все части. Вместо этого нам нужно разбить этот огромный кусок кода на более мелкие куски в соответствии с функцией каждого блока - например, разделить код на несколько файлов.
Как вы, вероятно, знаете, что разложение больших вещей на мелкие вещи, сгруппированные по функции, - это то, что мы имеем в виду, когда говорим о «создании чего-то модульного». Возможно, вы думаете, почему бы просто не разделить большой кусок кода на маленькие куски и не покончить с этим. Проблема заключается в том, что клиент не знает, какие файлы импортируют файлы из других файлов. Таким образом, у нас может быть несколько изолированных файлов без Webpack, но приложение будет работать нормально, так как это скорее всего не так, как в большом куске кода большая часть кода внутри него будет опираться на другие части кода в большом куске для работы ,
Нам нужно что-то вроде Webpack или один из его альтернатив (для браузера) для создания модульной системы. На стороне сервера Узел имеет встроенный модуль распознавателя, где вы можете «потребовать» модули. Однако браузеры не обладают такой функциональностью.
Однако, если у нас есть несколько файлов, некоторые импортируют друг из друга, и нам нужен способ узнать, какие файлы полагаются или зависит от друг от друга. Webpack позволяет нам использовать модули JavaScript на лицевой стороне, перемещая файлы из точки входа и затем сопоставляя их зависимости. Подумайте о точке входа как вершине иерархии в цепочке файлов, зависящих друг от друга.
Разрешение Модуль/Зависимость в Webpack
По Определяя график зависимостей Webpack способен загружать различные модули в правильном порядке асинхронно и параллельно. Внутренне Webpack имеет свой собственный резольвер для определения графика зависимости между различными модулями. В WebPack документы утверждают, что
Разрешитель помогает WebPack находит код модуля, который должен быть включен в комплекте для каждой такой требуется/оператор импорта.
Затем в документах объясняется, что распознаватель использует другой подход в соответствии с типом пути, на который ссылаются импорт в файлах, которые пакет Webpack связывает.
Процесс решения довольно прост и различает три типа запросов:
- абсолютный путь: требуется ("/ главная/мне/файл"), требуют ("C: \ Home \ me \ file ")
- относительный путь: require (" ../ src/file "), require (" ./ file ") путь к модулю:
- require (" module "), require (" module/lib/файл ")
Посмотрите на исходный код: https://github.com/webpack и прочитайте документы! –
Надеюсь, вы поможете с конкретным местом документации. Я уже нырнул туда, и мне не удалось решить последние вопросы. – Jordi
К вашему последнему пункту он обрабатывает ваш javascript локально в «пакет». Насколько я знаю, отношения клиент-сервер отсутствуют. –