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.

score 29 · Accepted Answer · edited Dec 30 '15 at 15:47

29

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

edited Dec 30 '15 at 15:47

VLS

2,306
4
22
17

answered Dec 30 '15 at 15:05

wandergis

424
4
6

score 13 · Answer 2 · edited Oct 11 '20 at 19:19

13

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

edited Oct 11 '20 at 19:19

marverix

7,184
6
38
50

answered Apr 23 '17 at 12:55

Johansrk

5,160
3
38
37

Isn't "1000" 1kb instead 10? Just saying – marverix Oct 11 '20 at 19:18

score 7 · Answer 3 · edited May 23 '17 at 11:54

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

score 0 · Answer 4 · answered Jan 29 '19 at 06:38

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

Webpack url-loader set destination path

4 Answers4