0

Webpack is powerful, sure, but it's confusing and complicated for beginners (like I am). Doesn't help that recently they moved to 2.2 so a lot of documentation I see is for the older version which adds to this difficulty.

All I want to do is this:

I have an app.css and a main.css which I want to minify and bundle into one (say app.min.css) and copy to my output directory - what's the easiest way?

I am manually linking it in my html file so I don't need webpack to write out a URL for me or anything. I may do a lot more fancy stuff around modularization latter, but for now I'd like to get my basic setup up and running. I do have my webpack.config.js running on my entry index.js file and that all seems fine.

What's the simplest way to do it? What am I missing? I'm getting lost in this loader and that loader (css-loader, raw-loader, style-loader...) and errors that are cryptic and take time to figure out. It surprises me that for a tool so powerful you'd imagine there are simpler ways to do basic things like this...

Thank you for the help

Gerry
  • 866
  • 2
  • 12
  • 31

1 Answers1

1

This is actually very simple, and the docs do a good job of explaining it.

First you need to make sure you have a css loader configured so Webpack knows what to do with css files. Then by using the ExtractTextPlugin you basically bundle what you specify into a separate file.

The entry block can take multiple files, so you could modify it like so. OR you could require/import them at the top of index.js.

entry: {
  bundle: "./index.js",
  main: "./main.css",
  app: "./app.css"
}
cgatian
  • 22,047
  • 9
  • 56
  • 76
  • Thank you for answering. I've decided not to pursue webpack anymore. Way too much hassle for what I need to get done - an app that isn't too large with huge number of files. Gulp is doing whatever I wanted with lot less pain! Or maybe I'm just dumb :) – Gerry Jan 30 '17 at 04:37
  • 2
    @Gerry, that's probably true. If you're not using a component framework like Angular or React then you're probably right. Personally, if this is a project that will need to be maintained for over a year, and will be pulling in additional libraries then I think its a no brainer to go with Webpack. I've lived through the pain of gulp, it does what it needs to, but having a module system behind you helps immensely. – cgatian Jan 30 '17 at 13:53
  • I will probably come back to it at some point in the future once my frustration wears away :) and the documentation gets better. – Gerry Jan 30 '17 at 16:09
  • 1
    @Gerry I know it definitely takes some getting used to. There's a lot of concepts moving at once, and jumping right into it can be daunting. Good luck. – cgatian Jan 30 '17 at 19:06