Webpack url-loader set destination path

Question

I'm using webpack's url-loader plugin and have it configured as:

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000"
}

It output files > 50k to the file system, but I can't find how to set a destination path.

In this case, I want the files to be stored to ./fonts and not the root.

Letreece

Answer 1

url-loader is build on file-loader, so you can use it like file-loader, as shown below:

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000&name=fonts/[name].[ext]"
}

Ekg

Answer 2

you can write it like this

{
        test: /\.(png|woff|eot|ttf|svg|gif)$/,
        use: [
          {
          loader: 'url-loader',
          options: {
            limit: 10000, // if less than 10 kb, add base64 encoded image to css
            name: "assets/[hash].[ext]" // if more than 10 kb move to this folder in build using file-loader
          }
        }]
      }

Guillotine

Isn't "1000" 1kb instead 10? Just saying – Yahiya

Answer 3

To add to the answer by @wandergis url-loader will rename the image if the size limit is exceeded and use a hash for the name. When using [name].[ext] as suggested, uses the original name of the file, which is not what I needed. I needed the name of the hash that url-loader is going to create. So, you can add [hash].[ext] to get the renamed file.

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000&name=fonts/[hash].[ext]"
}

Knapweed

Answer 4

You can also do this, which can be cleaner

   {
     test: /\.(ttf|eot|woff|woff2|svg)$/,
     use: [
        {
          loader: 'url-loader',
          options: {
            name:'[hash].[ext]' 
            outputPath: 'fonts',
          },
        },
       ],
    }

Egyptology