Can I use webpack to generate CSS and JS separately?

by

Should I even be using webpack for non-JS assets if I’m not going to mix them into my JS?

Maybe not. Webpack is definitely js-centric, with the implicit assumption that what you’re building is a js application. Its implementation of require() allows you to treat everything as a module (including Sass/LESS partials, JSON, pretty much anything), and automatically does your dependency management for you (everything that you require is bundled, and nothing else).

why would I require LESS in my JS when it has nothing to do with my JS code?

People do this because they’re defining a piece of their application (e.g. a React component, a Backbone View) with js. That piece of the application has CSS that goes with it. Depending on some external CSS resource that’s built separately and not directly referenced from the js module is fragile, harder to work with, and can lead to styles getting out of date, etc. Webpack encourages you to keep everything modular, so you have a CSS (Sass, whatever) partial that goes with that js component, and the js component require()s it to make the dependency clear (to you and to the build tool, which never builds styles you don’t need).

I don’t know if you could use webpack to bundle CSS on its own (when the CSS files aren’t referenced from any js). I’m sure you could wire something up with plugins, etc., but not sure it’s possible out of the box. If you do reference the CSS files from your js, you can easily bundle the CSS into a separate file with the Extract Text plugin, as you say.

More Related Contents:

  1. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  2. How to load all files in a directory using webpack without require statements
  3. Conditional build based on environment using Webpack
  4. Example of how to load static CSS files from node_modules using webpack?
  5. Why is my webpack bundle.js and vendor.bundle.js so incredibly big?
  6. How to dectect objects' overlaping situations in javascirpt? [closed]
  7. jQuery .animate function not responding properly
  8. how to proportionally scale a div with images inside?
  9. How to create a tag with Javascript?
  10. Navbar dropdown (collapse) is not working in Bootstrap 5
  11. Restart animation in CSS3: any better way than removing the element?
  12. JS function named `animate` doesn’t work in Chrome, but works in IE
  13. How do I re-trigger a WebKit CSS animation via JavaScript?
  14. How to build simple jQuery image slider with sliding or opacity effect?
  15. ES6 exporting/importing in index file
  16. Change an image with onclick()
  17. Why element.style always return empty in JS?
  18. Multicolor Text Highlighting in a Textarea or Text Input
  19. Detect CSS transitions using Javascript (and without modernizr)?
  20. Serving gzipped CSS and JavaScript from Amazon CloudFront via S3
  21. Prevent iOS bounce without disabling scroll ability
  22. How do I make an area unclickable with CSS?
  23. jquery ui autocomplete positioning wrong
  24. IE6 Hover Issue
  25. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  26. HTML5 Video duration without playing video
  27. How to get element by class name
  28. What does this javascript syntax mean ? (0, _parseKey2.default)(something) [duplicate]
  29. Split text into pages and present separately (HTML5)
  30. Can you have multiple lines in an element?

Leave a Comment