Как bundle.js внедряет содержимое стиля в index.html?

Как bundle.js внедряет контент стиля в index.html?

Я читаю книгу одностраничного приложения (React), которая описывает использование упаковщика как:

App.js

 import React from 'react'; import './App.css'; export default function App() { ... } 

Когда вы используете ключевое слово import для объявления зависимости от статического контента, решение о том, как обращаться с контентом, остается за инструментами разработки, т.е. webpack. Для небольших файлов содержимое будет включено в файл bundle.js вместе с кодом JavaScript, необходимым для добавления содержимого в документ HTML. Вот что происходит с App.css файлом App.css

поэтому я добавляю стиль в App.css для проверки:

App.css

 testClass { background-color: red } 

Я вижу, что index.html имеет элемент стиля, который содержит содержимое App.css . Я скопировал файл bundle.js в мой редактор кода и попытался найти testClass слово bundle.js в bundle.js , ничего не было. Итак, что означает «содержимое будет включено в файл bundle.js »? Я имею в виду, что если он есть, я смогу увидеть некоторый код JavaScript для управления DOM API следующим образом:

 var styleNode = document.createElement('style'); styleNode.styleSheet.cssText = 'testClass { background-color: red }'; document.getElementsByTagName('head')[0].appendChild(styleNode); 

Код упрощен мной, но вы понимаете, что я должен, по крайней мере, найти ключевое слово testClass в bundle.js, если содержимое будет включено в файл bundle.js ? так как же bundle.js внедряет содержимое стиля в index.html?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector