Add explanation #1

Activity

1. jhnns commented on Apr 3, 2013

   

   jhnns

   on Apr 3, 2013

   ContributorAuthor

   More actions

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

       background-image: url(file!../../bundle/assets/img/bg.jpg);
2. sokra commented on Apr 3, 2013

   

   sokra

   on Apr 3, 2013

   Member

   More actions

       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")
3. sokra commented on Apr 3, 2013

   

   sokra

   on Apr 3, 2013

   Member

   More actions

   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.
4. jhnns commented on Apr 3, 2013

   

   jhnns

   on Apr 3, 2013

   ContributorAuthor

   More actions

   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.
5. jhnns commented on Apr 3, 2013

   

   jhnns

   on Apr 3, 2013

   ContributorAuthor

   More actions

   Does the url() behaviour also apply on the less-loader? Or should it always be combined with the css-loader?
6. sokra commented on Apr 3, 2013

   

   sokra

   on Apr 3, 2013

   Member

   More actions

   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.
7. jhnns commented on Apr 3, 2013

   

   jhnns

   on Apr 3, 2013

   ContributorAuthor

   More actions

   Yep, thx!
8. jhnns commented on Apr 9, 2013

   

   jhnns

   on Apr 9, 2013

   ContributorAuthor

   More actions

   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.

   👍React with 👍1Reacted by Dan Heller
9. sokra

   closed this as completedin 29576ffon Apr 9, 2013
10. koistya

    added a commit that references this issue on Nov 19, 2015

    Merge pull request webpack#1 from jhnns/master

    ...

    99f19b3