Add explanation

[jhnns]

Hi @sokra :)

how is the url- or file-loader supposed to work with the css-loader?

[jhnns]

Sry I'm too dumb to get it. Tried something like this:

    background-image: url(file!../../bundle/assets/img/bg.jpg);

[sokra]

    background-image: url(../../bundle/assets/img/bg.jpg);

And configure it in the webpack options:

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/,    loader: "style-loader!css-loader" },
      { test: /\.jpg$/,    loader: "url-loader?limit=10000&minetype=image/jpg" }
      // or: { test: /\.jpg$/,    loader: "file-loader" }
    ],
  }
};

Then:

require("./style.css");

---

For rar cases it also possible to overwrite it in the css:

    background-image: url(~!file!../../bundle/assets/img/bg.jpg);

Generally url(file) -> require("./file") and url(~file) -> require("file")

[sokra]

The url-loader generates a Data Url if file size below the limit. Elsewise it fall back to the file-loader.

The file-loader generates a file in your output.path. The basename is a md5 hash and extension is copied from original file.

[jhnns]

Ah thx. Great! webpack is awesome 👍
I think the README should be more explicit on this point. Something like this (in case my presumption are correct 😀):

@import statements will be resolved by the css loader. The file will be included in place of the statement
url(...) statements will stay untouched unless a loader for that file-type has been specified in the webpack options.

[jhnns]

Does the url() behaviour also apply on the less-loader? Or should it always be combined with the css-loader?

[sokra]

The less-loader just emits css. You have to configure it like this:

  { test: /\.less$/,   loader: "style-loader!css-loader!less-loader" },

Check this example config.

[jhnns]

Yep, thx!

[jhnns]

I think the line "You should define useful loaders by config." is still a bit unclear. Would be nice to include some example config that will be passed to webpack. I sought for a way to pass the url-loader a config object.