smart - Webpack url-loader set ruta de destino

webpack 4 images

Question

Estoy usando el complemento url-loader de webpack y lo tengo configurado como:

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

Da salida a los archivos> 50k al sistema de archivos, pero no encuentro cómo establecer una ruta de destino.

En este caso, quiero que los archivos se almacenen en ./fonts y no en la raíz.

Answer 1

Para agregar a la respuesta mediante @wandergis url-loader cambiará el nombre de la imagen si se excede el límite de tamaño y usará un hash para el nombre. Al usar [name].[ext] como se sugiere, usa el nombre original del archivo, que no es lo que necesitaba. Necesitaba el nombre del hash que va a crear url-loader. Por lo tanto, puede agregar [hash].[ext] para obtener el archivo renombrado.

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

Answer 2

También puedes hacer esto, que puede ser más limpio.

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

Answer 3

puedes escribirlo asi

{
        test: //.(png|woff|eot|ttf|svg|gif)$/,
        use: [
          {
          loader: ''url-loader'',
          options: {
            limit: 1000, // 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
          }
        }]
      }

Answer 4

url-loader se basa en el cargador de archivos, por lo que puede usarlo como el cargador de archivos, como se muestra a continuación:

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