1

Hello Everybody , I Have kind of stupid question about webpack but I really want to know answer for it


What an advantages of using css loader (css-loader, style-loader ) through webpack if I can insert my .css file straight in my index.html for example


I understand that webpack using in large and scalable project but can anybody give me the example when it's really helps and give advantage to use it instead of using pure, old and good-known link to stylesheet in main file index.html for example

1 Answer 1

2

1- You can pipe your CSS through other plugins to autoprefix your CSS based on the browser support you need.

2- You can minify your CSS.

3- You can chunk your CSS and exclude/include the output dynamically from certain bundles.

4- You can generate source maps for easy debugging.

5- You can have your browser auto-reload when you make changes to your CSS.

6- You can dynamically change your CSS output file names with hashes to invalidate CDN caches.

7- You can import your CSS in JavaScript files.

8- You can use CSS Modules in your JavaScript files.

9- You can eliminate unused CSS rules a.k.a. dead-code elimination.

These are only some of the things you can achieve that came to my mind. There are many more as people keep on writing plugins for the ecosystem.

It should be noted that you don't particularly need Webpack to achieve any of these goals, they could be done manually or with task runners or custom scripts. But if your project uses Webpack for bundling your JavaScript, why not let Webpack handle your CSS as well?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.