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.

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

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