Webpack url-loader set destination path
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]"
}
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]"
}
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
}
}]
}