Блог

Итак, у меня есть несколько вопросов относительно того, как Webpack обслуживает свои пакеты. У меня есть приложение React, созданное с использованием create-react-app . Когда я проверяю пакеты JS в Chrome dev tools, я вижу все отдельные файлы js, которые я создал в своем приложении React (например. App.js ). Но я также вижу другие пакеты, такие как bundle.js , 0.chunck.js и main.js . Однако на вкладке сеть отображаются только файлы пакетов. Это указывает на то, что фактически были загружены только пакеты Webpack.

Итак, вопрос в том, как эти другие отдельные файлы доставлялись в браузер? Использует ли мое приложение пакет или эти отдельные файлы? Я считаю, что отдельные файлы JS доступны только в режиме Webpack «разработка», а не в режиме «производство», но я все равно хотел бы это понять.

Кроме того, является ли исходный код React частью этих пакетов или React доступен глобально? Если React является частью пакетов, то как средства разработки React распознают, что React присутствует на странице, учитывая, что все пакеты Webpack изолированы от всего остального кода?

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

Исходные карты

Исходные карты — это файлы, которые сопоставляют код в связанном файле с местоположениями кода в разделенных файлах. Эти исходные карты генерируются вашим компилятором (если он включен) при объединении вашего кода. Они поставляются с кодом по запросу и используются вашим браузером, так что вы можете отлаживать свой собственный разделенный код в инструментах разработчика браузера. Для получения более подробной информации здесь есть хорошее введение в карты исходных текстов.

Что касается вашего второго вопроса: инструменты React dev распознают React, если window.__REACT_DEVTOOLS_GLOBAL_HOOK__ он установлен. Это свойство представляет собой специальный объект, обеспечивающий связь с серверной частью инструментов разработчика в браузере или автономном приложении. Поскольку это элемент глобального window объекта, он доступен везде и, следовательно, не привязан к одному пакету.