How to add style files to one bundle with js?

Question

Node.js

How to add style files to one bundle with js?

At least a hint is needed.

And it’s interesting what webpack does under the hood, how, when reading a js file, does the browser recognize that there are styles and what is code? According to the idea js has a mechanism for creating a tag and inserting styles into it.

Answer 1

Webpack only works with JS code out of the box, and only handles it in .js files.
To process files of other formats, loaders are used that convert one code into another.
In the webpack config, you can describe the rules that certain loaders are applied to files with the name of a certain format.
Loaders usually perform a single transformation. You can also build loaders in chains, getting a series of transformations. The final loader (the one to the left in the list) must necessarily produce a JS code at the output. Style-loader
is able to insert CSS on the fly into the browser , but it does not work with CSS, but with the output of css-loader , which is just responsible for converting CSS to JS string.