CODEWITHSUNDEEP
cssbuildwebpackwebpack-style-loader
Gerry
Gerry

Reputation: 886

Webpack - how to do simple css minification and concatenation

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

Upvotes: 0

Views: 1330

Answers (1)

cgatian
cgatian

Reputation: 22984

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"
}

Upvotes: 1

Related Questions