CODEWITHSUNDEEP
javascriptwebpack
FurkanO
FurkanO

Reputation: 7298

webpack inlines the CSS as a string inside the JS bundle

I have been reading about webpack and I finally got what webpack does basically. I need many advanced features of webpack too. So I am trying to learn webpacks features as much as I can.

So, I was reading another great source for webpack. But as I ll provide the github wiki link of this page, It says something I don t get.

When you require CSS (or less, etc), webpack inlines the CSS as a string inside the JS bundle and require() will insert a tag into the page. When you require images, webpack inlines a URL to the image into the bundle and returns it from require().

Link for the source is webpack-howto | Stylesheets and images

I hope someone helps me clear things out with this part.

Upvotes: 0

Views: 82

Answers (1)

Emil Oberg
Emil Oberg

Reputation: 4046

Let's say you have myStyle.css with the content:

.something { color: red; }

When you (in your .js file) do a:

require('./myStyle.css');

then Webpack will read that style document and output it in a <style> tag in your HTML document, e.g. 

<html>
<body>
    <style>
        .something { color: red; }
    </style>
</body>
</html>

Same thing with images. If you in your js do:

const imageUrl = require('/path/to/your/image');

Then Webpack will make sure that that image is copied into your build/dist folder and that it's given a unique name (e.g. 15be437...). And your imageUrl variable will be set to that unique name.

All of this is configurable. You can make Webpack output a regular .css file instead of inlining it. You can make images into Base64 images etc.

Upvotes: 2

Related Questions