User file-loader and url-loader together for same file types?

I’ve got following config:

module: {
  loaders: [
    { test: /\.(woff|png)$/, loader: 'url-loader?limit=10000' },
    { test: /\.(png|jpg)$/, loader: 'file-loader'}
  ]
},

In my project some PNGs are used via url('...'), and some used via require('...') hence the above configuration, but obviously it won’t work for that seemed png could only appear in one of the loader.

I was wondering what’s the best way to deal with the situation? Thanks.

Author: Fantashit

3 thoughts on “User file-loader and url-loader together for same file types?

  1. The url in url-loader has nothing to do with the url in url(...). The url in url-loader means DataUrl. Both can be applied to url(...) and require(...). In fact the css-loader converts url(...) into require(...).

    So for your loaders configurations you only need to decide if you want small files inlined as DataUrls (url-loader) or if you want every file as separate request (file-loader).

  2. Thanks for the clear reply, I changed the configuration to this and it worked fine:

    { test: /\.(woff|png|jpg|gif)$/, loader: 'url-loader?limit=10000' },
    

    But what if I got a folder, say /src/assets/large-icons/ full of large PNG icons that I just want to copy to /build without any preprocessing, but since they are in PNG format, they will be picked up by url-loader first (hence names being rewritten…etc), how do I correctly configure the loader under this situation?

  3. But what if I got a folder, say /src/assets/large-icons/ full of large PNG icons that I just want to copy to /build without any preprocessing, but since they are in PNG format, they will be picked up by url-loader first (hence names being rewritten…etc), how do I correctly configure the loader under this situation?

    The output filename should be irrelevant, css-loader + file-loader (data-loader uses file-loader if filesize > limit) should abstract it away from you. So if your url(...) correctly point to a file it should work regardless of the output filename.

    You can configure the output filename of the file-loader with the name query parameter (see file-loader documentation). By default it’s name=[hash].[ext], for a copy you can specify i. e. url-loader?limit=10000&name=[path][name].[ext] but in this case I recommend name=[path][name].[ext]?[hash] for better caching.

    For compression try this https://www.npmjs.com/package/image-webpack-loader in production.

Comments are closed.